微信小程序是数据驱动的应用，开发技术和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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。