wx小程序request请求在项目实战中的封装

　　前沿
　　在小程序项目开发中，对请求做封装是比较常见的操作，我们可以在封装过的请求里，做一些统一处理，比如统一配置、请求拦截、错误异常处理、授权处理等
　　好了，我们直接看干货，上代码
　　request封装
　　在项目根目录下新建一个request目录，再在目录下新建一个index.js文件，文件里的内容如下import {   BASE_API_URL,   TIME_OUT,   STATUS_CODE_OK } from ＂../config/index.js＂  // opt是配置参数，不传就是空对象 const request = (opt = {}) => {   // 请求是异步的，我们返回一个Promise   return new Promise((resolve, reject) => {     // wx小程序定义的全局属性     // 比如用户登录成功后，后台生成的token可以放这里     let globalData = getApp().globalData     // 请求开始前，加遮罩，防止重复提交     // loadingTitle自定义加载的文字     wx.showLoading({       title: opt.loadingTitle || ＂加载中＂,       mask: true     })     // 微信小程序请求     wx.request({       header: {         // contentType设置，默认是query的方式         // 可能通过opt.contentType定义为＂application/json＂         ＂content-type＂: opt.contentType || ＂application/x-www-form-urlencoded＂,         // jwt的token，用户登录后，后台生成的token         // 每次请求的时候带上，可以校验当前用户是否全法         ＂Authorization＂: globalData.token       },       // 请求超时时间，一般60秒       timeout: TIME_OUT,       // 请求的url       // BASE_API_URL是api请求的统一前缀       url: BASE_API_URL + opt.url,       // 请求时需要带的参数       data: opt.data || {},       // 请求的方法，默认POST       method: opt.method || ＂POST＂,       // 请求成功处理       success(res) {         // statusCode如果是401，代表这次请求不合法         if (res.statusCode === 401) {           // 弹窗提醒           wx.showModal({             title: ＂警告＂,             showCancel: false,             content: ＂当前用户信息已失效，请退出小程序重新进入＂,             confirmText: ＂确认＂,             success() {               // 并清空全局对象的用户信息               globalData = {                 userInfo: {},                 token: ＂＂               }               // reject处理，代表请求不成功               reject(＂请求失效＂)             }           })         } else {           // 后台返回的请求code码为非正常码           // 代表业务处理有异常           // 统一处理，在页面上显示异常信息，提醒用户           if (res.data.code !== STATUS_CODE_OK) {             // 这个是自己封装的一个toast方法             notifyError(res.data.msg)           }           // 返回后台给到的数据           resolve(res.data)         }       },       // 请求失败处理       fail(err) {         // 把错误信息弹窗显示，提醒用户         wx.showModal({             title: ＂警告＂,             showCancel: false,             content: JSON.stringify(err),             confirmText: ＂确认＂,           })         // reject处理，代表请求不成功         reject(＂fail＂)       },       // 无论请求成功与失败都会走的方法       complete() {         // 关闭请求中的遮罩         wx.hideLoading()       }     })   }) } export default request 使用// 引入封装的request import request from ＂../request/index.js＂  // 获取个人用户的区域列表 request({   // 请求的方法   method: ＂POST＂,   // 请求的url   url: ＂/xxx/xxx＂,   // 请求参数   data: {     username:＂xxx＂,     password:＂xxx＂   }  }).then(res=>{   // 请求拿到的数据   console.log(res) }).catch(err){   // 请求异常拿到的数据   console.log(err) }
　　好了，wx小程序request请求封装就到这了
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧