微信小程序> 对于小程序拦截器http请求

对于小程序拦截器http请求

浏览量:729 时间: 来源:w001yy

微信小程序是数据驱动的应用,开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request,所以需要我们针对wx.request进行封装,实现http拦截器的功能。

第一步:创建一个request.js文件

建议在utils下面创建一个request.js文件

第二步:确定http、upload和websocket前缀

const apiHttp ="https://此处填写自己的域名链接";const socketHttp = "wss://.....com/wss";

request.js填写请求前缀

第三步:封装wx.request

functon fun(url,method,data,header){data = data || {}header = header || {}let sectionId = wx.getStorageSync("UserSessionId");if(sessionId){..........//此处处理sessionId存在}wx.showNavigationBarLoading();let promise = new Promise(function(resolve,reject){wx.request({url:apiHttp +url,  header: header,  data:data,  method:method,  success: function(res){....  },  fail:reject,  complete:function(){....}});});return promise;}

reject.js function fun
在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻辑判断,重点是使用Promise对象。

第四步:导出模块

module.exports = {  apiHttp: apiHttp,  socketHttp: socketHttp,  "get": function(url, data, header) {    return fun(url, "GET", data, header);  },  "post": function(url, data, header) {    return fun(url, "POST", data, header);  },  upload: function(url, name, filePath) {    return upload(url, name, filePath);  }};

request.js  导出模块

第五步:使用request

const Request = require("/utils/request");//导入模块Request.post("/api/xcxWxLogin", {  //调用方法              code: res.code,              encryptedData: resp.encryptedData,              iv: resp.iv,              shareId: share.shareId || "",              salesmanId: share.salesmanId || "",              source: share.source || ""}).then(res = { //成功回调        //todo}).catch(err = {}); //异常回调

作者:Msgyvcici
链接:https://www.jianshu.com/p/813dd09ad39c
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎