uniapp封装网络请求(post+token)

一时失言乱红尘 2022-11-29 00:51 749阅读 0赞

先看代码,复制使用即可,一共三个步骤,具体使用方式下文将清楚罗列,任何新手都可以轻松了解和使用。同时您将为此省下很多宝贵时间。

下面是请求的封装,您需要在根目录下新建Get.js文件,然后复制以下代码即可。

  1. // 注释将会特别详细,只有您有合理地耐心看完将不会出现问题
  2. function request(method,url, data) {
  3. return new Promise((resolve) => {
  4. uni.showLoading({
  5. title:'加载中...'
  6. });
  7. uni.request({
  8. method: method,
  9. url: url,
  10. data: data,
  11. header: {
  12. 'Accept': "*/*",
  13. 'content-type': 'application/json;charset=utf-8',
  14. 'token': "",//您可根据如本地存储或者vuex再此处使用逻辑或 来插入token
  15. 'Authorization':'',//有的时候这里不一定是 token 还可能是 Authorization
  16. },
  17. success(res) {
  18. resolve(res)
  19. uni.hideLoading()
  20. },
  21. fail(err) {
  22. uni.showToast({
  23. title: '请求失败',
  24. icon: 'none',
  25. duration: 1500,
  26. })
  27. uni.hideLoading()
  28. }
  29. })
  30. })
  31. }
  32. function POST(method,url,data) {
  33. return request(method,url,data)
  34. }
  35. module.exports = {
  36. POST
  37. }

接下来是配置调用的方法,我推荐您新建一个API.JS文件,在根目录或者您习惯的地方,然后复制以下代码即可

  1. import { POST } from "POST"
  2. let base = 'https://www.zhijiaotai.com/education';
  3. //微信登录
  4. export const WXlogin = params => { return POST('POST',`${ base}/WeChat/login`,params).then(res => res.data); };
  5. //通过openid获取用户的信息
  6. export const OpenidGetUser = (openId,params) => { return POST('GET',`${ base}/User/openid/${ openId}`,params).then(res => res.data); };

这是最后一步,在任何您想调用GetList这个接口下数据的页面下复制以下代码

  1. import { GetList } from "../../Api" //您的api路径
  2. //然后在您的函数中 或者 onload 测试一下
  3. //请注意 GetList 是个方法,您想传输的参数可以这样设置 不需要参数时不传即可
  4. onload(){
  5. let params = {
  6. name'姓名'
  7. }
  8. GetUserMsg(params).then(res=>{
  9. console.log(res) //然后就可以看见您所需要的数据
  10. })
  11. }

其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

发表评论

表情:
评论列表 (有 0 条评论,749人围观)

还没有评论,来说两句吧...

相关阅读