小程序网络请求封装 promise

今天项目的界面画完了，要为调接口坐准别了。我翻了网上的帖子，综合封装了一下，希望对入手小程序的人有帮助。

新建一个request.js 再utils目录下

request.js内容

//BaseUrl
const baseUrl = 'http://192.168.45.191:9183';

//token
var tokenKey = "token";

// 登录地址, 根据这个地址来设置token
var loginUrl = "/scf/user/user/login";

// 例外不用token的地址
var exceptionAddrArr = [
  '',//暂时是个例子
];

//剪头函数表达式得写法 (参数1, 参数2, …, 参数N) => { 函数声明 }
const http = ({ url = '', param = {}, ...other } = {}) => {
  wx.showLoading({
    title: '正在加载...'
  });
  // 记录发起请求的当前时间
  let timeStart = Date.now();
  
  return new Promise((resolve, reject) => {
    //设置header
    CreateHeader(url, function (header) {
      //发起请求
      wx.request({
        url: getUrl(url),
        data: param,
        header: header,
        ...other,
        // 接口调用结束的回调函数（调用成功、失败都会执行）
        complete: (res) => {
          console.log(`耗时${Date.now() - timeStart}`, getUrl(url));
          //为了兼容部分andriod 异步请求是隐藏不掉弹框加得延时
          setTimeout(function () {
            wx.hideLoading();
          }, 100);
          //请求成功状态吗
          if (res.statusCode == 200) {
            // console.log(res)
            //登录接口成功后设置token
            if (url === loginUrl) {
              wx.setStorage({
                key: tokenKey,
                data: res.header.token
              })
            }
            if (res.data.code === '000000') {//正常返回数据
              resolve(res.data)
            } else if (res.data.code === '900001') {//登录超时，请重新登录
              wx.showToast({
                title: res.data.message,
                icon: 'none',
                success: function () {
                  setTimeout(function () {
                    wx.navigateTo({
                      url: '../login/login',
                    })
                  }, 1000);
                  
                }
              })
            }else{//其他服务端状态码
              wx.showToast({
                title: res.data.message,
                icon: 'none',
              })
              console.log(res.data)
              reject(res)
            }
            
          } else if (res.statusCode && res.data.msg) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none'
            })
            reject(res)
          } else {
            //其他状态码处理
            reject(res)
          }
        }
      })
    });
  })
}

//拼接url
const getUrl = (url) => {
  if (url.indexOf('://') == -1) {
    url = baseUrl + url;
  }
  return url
}

const _get = (url, param = {}) => {
  return http({
    url,
    param
  })
}

const _post = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'post'
  })
}

const _put = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  })
}

const _delete = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  })
}


/** 
 * @param url:String 请求地址(根据请求地址判断是否添加token)
 * @param complete:Function 回调函数
 */
function CreateHeader(url, complete) {
  var header = {
    'content-type': 'application/json'
  }
  if (exceptionAddrArr.indexOf(url) === -1) {  //排除请求的地址不需要token的地址
    wx.getStorage({
      key: tokenKey,
      success: function (res) {
        header.token = res.data;
      },
      fail: function (error) {
        console.log(error);
      },
      complete: function () {
        complete && typeof complete === 'function' ? complete(header) : null;
      }
    });
  } else {
    complete && typeof complete === 'function' ? complete(header) : null;
  }
}

module.exports = {
  baseUrl,
  _get,
  _post,
  _put,
  _delete
}

使用：
page.js中引入：

const api = require('../../utils/request.js')

调用：

api._get('/scf/user/main/index').then(res => {
        // console.log(res.data)
        this.setData({
         
        });
        wx.stopPullDownRefresh()
      }).catch(e => {
        console.log(e + '出错啦')
        currentPageState.failed()
      })

后续再更新哦。。。喜欢的点个赞吧