【小程序】利用promise封装wx.request通用请求函数

 通常为了接口调用的统一性，每个项目都会根据需求封装请求函数，在自己封装的请求中，可以做一些通用的操作，例如请求错误显示信息弹窗，请求头带不带token等。

 

import baseUrl from '../config'
import { uploadFormIds } from './formIds'

function getHeader() {
  if (wx.getStorageSync('token')) {
    return {
      'content-type': 'application/json',
      'x-token': wx.getStorageSync('token')
    }
  }
  return {
    'content-type': 'application/json'
  }
}

function showErrToast(e) {
  wx.showToast({
    title: e,
    icon: 'none',
    duration: 1500
  })
}

function getPromise(url, data, method) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}${url}`,
      header: getHeader(),
      method: method,
      data: data,
      success: function(res) {
        if (res.data.code === 200) {
          resolve(res.data.data)
        } else {
          reject(res.data.message)
        }
      },
      fail: function(err) {
        reject(err)
      }
    })
  }).catch(function(e) {
    showErrToast(e)
  })
}

const http = {
  get: function(url, data) {
    uploadFormIds()
    return getPromise(url, data, 'GET')
  },
  post: function(url, data) {
    return getPromise(url, data, 'POST')
  },
  put: function(url, data) {
    return getPromise(url, data, 'PUT')
  },
  delete: function(url, data) {
    return getPromise(url, data, 'DELETE')
  }
}

export default http

 

 

这样就封装好了通用的http请求对象。使用方法也很简单,只需传入url跟data。返回promise对象。与async/await配合使用，妥妥的异步变为“伪同步”编程。

http.get(url, data)
http.post(url, data)
http.delete(url, data)
http.put(url, data)

 

 

通过http封装对象，可以用api.js统一管理我们的接口。例如

import http from '../utils/http'

// 用户地址
export const Address = {
  get: function() { return http.get('address') },  // 获取用户地址列表
  post: function(data) { return http.post('address', data) },  // 新增用户地址
  put: function(data) { return http.put(`address/${data.id}`, data) },  // 修改用户地址
  delete: function(id) { return http.delete(`address/${id}`) } // 删除用户地址
}

// 用户
export const User= {
  get: function() { return http.get('user') },  // 获取用户
  post: function(data) { return http.post('user', data) },  // 新增用户
  put: function(data) { return http.put(`user/${data.id}`, data) },  // 修改用户
  delete: function(id) { return http.delete(`user/${id}`) } // 删除用户
}

 

// 如何使用封装好的接口API
import { Address } from 'api'

async function getAddress(){
    let result = await Address.get(); 
    ...
}
async function delAddress(id){
    let result = await Address.delete(id); 
    ...
}