原创

小程序 request请求的封装

作者：残城碎梦 围观群众：596 更新于 标签：小程序request封装

封装wx.requst

原因

在小程序的开发过程中。发起 HTTPS 网络请求。要用到wx.request方法。在使用过程中发现。每次调用这个方法发现其中绝大部分的内容都是重复的。这样以来一个js中调用多次https请求会导致代码特别混乱。所以要对wx.request()方法进行封装。

封装步骤

  1. 在小程序的根目录新建api的文件夹,并且新建req.js
  2. 封装代码
const app = getApp(); 

/** * @param {*} url 请求路径 * @param {*} options 请求参数 * @param {*} isNeedTocken 是否需要Tocken * @param {*} isJson 是否已json形式传给后台, 否则仪表单的形式。 */
const request = (url, options,isNeedTocken,isJson) => {
   
   return new Promise((resolve, reject) => {
   
       wx.request({
   
           url: `${
     app.globalData.host}${
     url}`,//拼接请求路径，读取app.js中的全局变量
           method: options.method,
           data:isJson?JSON.stringify(options.data):options.data ,
           header: {
   
               'Content-Type':isJson?'application/json':'application/x-www-form-urlencoded',
               'authorization': isNeedTocken?app.globalData.tocken:''  // 看自己是否需要
           },
           success(request) {
   
               if (request.data.code === 200) {
   //请求成功的状态码。看每个公司的情况。我习惯使用200来定义成功状态。
                   resolve(request.data)
               } else {
   
                   reject(request.data)
               }
           },
           fail(error) {
   
               reject(error.data)
           }
       })
   })
}

/** *封装get请求 */
const get = (url, options = {
   },isNeedTocken = true,isJson = false) => {
   
   return request(url, {
    method: 'GET', data: options },isNeedTocken,isJson)
}

/** * 封装post请求 */
const post = (url, options,isNeedTocken=true,isJson = false) => {
   
   return request(url, {
    method: 'POST', data: options },isNeedTocken,isJson)
}

//暴露接口
module.exports = {
   
   get,
   post
}

调用

在需调动的js方法中调用
import req from “…/…/api/req”;

然后直接使用就可以了。

 req.post(login,{
   "phoneOrNumber":phoneOrNumber,"possword":possword},false).then(res =>{
   
      //处理成功的请求
      }).catch(err=>{
   
        //请求报错，或者状态码返回错误。
      })
加入收藏