小程序wx.request封装/携带token

在根目录下新建request文件夹，放两个文件：dev.js:环境区分，request：wx.request封装

dev.js

const current = 'dev' //区分开发环境和生产环境，
const profiles = {
  'dev': {
    'online': false,
    'baseURL': '开发环境' //开发环境地址
  },
  'prod': {
    'online': true,
    'baseURL': '正式环境'//生产环境地址
  }
}
const ENV = profiles[current]
module.exports = ENV

request.js

import ENV from './dev'

let ajaxTimes = 0 // 异步请求的个数

export const request = (params, isToken) => {
  let header = {...params.header} // 避免覆盖传递过来的header
  // 全局设置token 传params的时候需要携带token的多传一个参数
  if (isToken) {
    const token = wx.getStorageSync('token')
    if (token) {
      header['Authorization'] = token
    }
  }
  ajaxTimes++
  wx.showLoading({
    title: '加载中',
    mask: true
  })
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      header: header,
      url: params.customUrl || ENV.baseURL + params.url, // params.customUrl自定义的url，有些接口可能baseURL也不同
      success: result => {
        if (result.data.meta.status === 200) {
          resolve(result.data.message) // 直接返回结果，需要结构一样
        } else {
          reject(result.meta.msg)
        }
      },
      fail: err => {
        wx.showToast({
          title: '获取数据失败',
          icon: "none",
          duration: 2000
        })
        reject(err.data)
      },
      complete(res) {
        ajaxTimes--
        if (ajaxTimes === 0) {
          wx.hideLoading() // 当所有的请求都完成时再关闭loading
        }
      }
    })
  })
}

在根目录下新建api文件夹来管理接口

image.png

比如管理订单接口的order.js

import {request} from '../request/index'

// 获取所以订单
export function getAllOrder(data) {
  return request({
    url: '/my/orders/',
    method: 'get',
    data // 这里get和post都是data,没有params
  },'isToken'/是否需要携带token/)
}

页面使用

import {getAllOrder} from '../../api/order'
async getOrderList(type) {
    try {
      const param = {
        type: type
      }
      const {orders} = await getAllOrder(param)
      this.setData({
        orderList: orders.map(v => ({...v, create_time_cn: (new Date(v.create_time * 1000).toLocaleString())}))
      })
    } catch (e) {
      console.log(e)
    }
  },