小程序请求封装

封装请求

和 vue 中封装 axios 类似的操作，只不过对于 参数的处理比较特殊，没有 axios 那么方便

在请求前可以添加一些参数的处理，比如添加 token ， session 等

也可以在 js 文件中引入弹框等，做报错的拦截处理

// request.js
const request = options => {

  return new Promise((resolve, reject) => {
      const { isFD, header = {} } = options

      delete options.header
      isFD && (options.data = handlerParams(options.data))
      wx.request({
        header: Object.assign({ 'Content-Type': !isFD ? 'application/json' : 'application/x-www-form-urlencoded;charset=utf-8' }, header),
        ...options,
        success: (res) => {
          resolve(data)
        },
        fail: (error) => {
          reject(error)
        }
      })
    })
  }

const handlerParams = (obj = {}) => {
  const [first,...array] = Object.keys(obj)
  const firstParams = array.length && `${first}=${obj[first]}`
  return array.reduce((result, k, i) => (result+=`&${k}=${obj[k]}`, result), firstParams || '')
}

export default request

方法的封装

封装了 两种请求方式，post 分为了 formdata 和 json

import request from "./request";

// 使用箭头函数 this 指向会有问题， 这里需要判断 arguments 
function post (url, data, header, isFD = false) {
  const length = arguments.length
  if (length <= 3 && typeof arguments[length-1] === 'boolean') {
    isFD = arguments[2]
  }
  return request({
    method: 'POST',
    url,
    data,
    header,
    isFD
  })
}

const postFormData = (...args) => {
  return post(...args, true)
}

const get = (url, data, header) => {
  return request({
    method: 'GET',
    url,
    data,
    header
  })
}

export default {
  post,
  postFormData,
  get
}