微信小程序wx.request简单封装,入门级附源码
发布于 4 年前 作者 kliao 1145 次浏览 来自 分享

接口统一配置文件,http.js

const fetch=require("./fetch")  // 引入封装的wx,request请求
//确认开发环境
// "http://192.168.2.11:81", // 开发环境
// "http://192.168.2.11:81", // 测试环境
// "http://192.168.2.11:81" // 生产环境
let baseURL='http://192.168.2.11:81';  // 公共部分统一
function shopList(data)// 查询房源列表
  return fetch(baseURL + '/Shared/Rental/List'"GET", data)
}
function needShopList(data)// 查询求租列表
  return fetch(baseURL + '/Shared/AskRent/List'"POST", data)
}
module.exports={
  shopList,
  needShopList
}

接口封装文件,fetch.js

//封装wx.request()网络模块
module.exports = (url, methods, datas) => {
  let p = new Promise((resolve, reject) => {
    let type;
    let data;
    let method;
    if (methods === 'POST_F') { // 表单提交,这里可以对请求的数据进行封装,普通post不需要这步操作
      type = 'multipart/form-data; boundary=XXX';
      let result = ''
      for (let name of Object.keys(datas)) {
        let value = datas[name];
        result +=
          '\r\n--XXX' +
          '\r\nContent-Disposition: form-data; name=\"' + name + '\"' +
          '\r\n' +
          '\r\n' + value
      }
      result += '\r\n--XXX--'
      data = result;
      method = 'POST';
    } else {
      type = 'application/json';
      data = datas;
      method = methods;
    }
    wx.request({
      url,
      method,
      data,
      header: {
        token:wx.getStorageSync('token') || "",// 登录后获取的token
        'content-type'type // 默认值
      },
      success(res) {
        let data = res.data.biz // 这里返回数据自定义返回需要的部分就可以了
        if (data.code === '401') { // 这里可以对请求的状态进行判断,做出相应的动作,登录过期,去登陆
          wx.removeStorageSync('token')
          return wx.showModal({
            title: '温馨提示',
            content: '您当前还未登录,为了更好的体验请先登录!',
            showCancel: true,
            success: function (res{
              if (res.confirm) {
                return wx.navigateTo({
                  url: '/pages/login/login', // 点击确定去登陆
                })
              }
            }
          })
        }
        resolve(data)
      },
      fail(err) { // 请求失败后判断状态码,如果是登录问题就去登录
        console.log(err, '请求失败1!')
        debugger;
        reject(err)
      }
    })
  })
  return p;
}

在app.js文件引入封装好的wx.request

const http = require('./api/http.js')
App({
  http, // 引入http
})

4

1 回复

写的真好我算是学到了

回到顶部