Promise封装wx.request

Promise封装wx.request

1.创建js文件
新建一个文件夹，里边新建三个js文件 用来封装我们的请求接口api,wx.request，和在http.jst，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；

这是我的文件列表(axios 就是 http)

## 2.在request.js中写我封装的wx.request代码

  module.exports = (url, data, method) => {
    return new Promise((resolve,reject) => {
      wx.request({
        url: url,       //请求得接口
        data: data,      //接口所需要的参数
        method: method,    //接口使用的方法 posh 或者 get
        success(res) {
            resolve(res)     //成功的回调函数
        },
        fail(err){
          reject(err)        //失败的回调
        }
      })
    })
  }

3.api.js中写我们的接口api

module.exports={
  "swiber":"/home/swiperdata",  //请求得接口
}

4.axios.js中写我们需要使用得方法

//先导入我们封装好的api和request
var api = require('../http/api')   
var req = require('../http/request')

let baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1" //
//请求轮播图的数据
function swiper() {
  return req(baseUrl + api.swiber, {}, "get")
}
module.exports = {
  swiper,                     //将这个方法导出

}

5.最后就是在全局的app.js中导入axios,注册在根组件,这样在任何组件都可以使用,

// app.js
let axios = require('./http/axios')  //导入axios
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  },
  axios,
}
)

6.最后就是在页面使用

const app = getApp();
Page({
  data: {
   list:[]
  }
onLoad: function () {
    app.axios.swiber().then((res)=>{
                this.setData({
                    list: res.data.list
        })    })
}