微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api----新增源码地址

wocwin

已于 2023-07-14 15:19:09 修改

阅读量266

点赞数

分类专栏： mpvue&原生微信小程序文章标签： vue 小程序微信小程序 mpvue promise 封装api vant-weapp

于 2021-02-23 17:03:01 首次发布

本文链接：https://blog.csdn.net/cwin8951/article/details/113996164

版权

mpvue&原生微信小程序专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1、在src下utils新建一个promiseRequest.js文件（用es6-promise封装wx.request）代码如下：

import store from '@/store'
import { Toast } from './index'
import { Constant } from './settingConfig'
const Promise = require('es6-promise').Promise

function wxPromisify (fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      // 成功 (只返回res.data)
      obj.success = function (res) {
        这里可以做全局拦截
        if (res.data.success) {
          resolve(res.data)
        } else {
          Toast(res.data.msg || res.data.message, 'none', 1600)
        }
      }
      obj.fail = function (res) {
        // console.log('失败拦截', res)
        reject(res)
      }
      fn(obj)
    })
  }
}
// post请求
function wxCompletePromisify (fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        // 成功 (只返回res.data)
        resolve(res)
      }
      obj.fail = function (res) {
        // 失败
        reject(res)
      }
      fn(obj)
    })
  }
}
// 无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
  let P = this.constructor
  return this.then(
    value => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => {
      throw reason
    })
  )
}
/**
 * 微信请求get方法
 * url
 * data 以对象的格式传入
 */
export function getRequest (url, data) {
  var getRequest = wxPromisify(wx.request)
  var header = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'x-requested-with': 'XMLHttpRequest'
  }
  if (url !== Constant.BASE_URL + '/scm/app/checkUser' && url !== Constant.BASE_URL + '/scm/app/getOpenId') {
    header.Authorization = store.getters.token
  }
  return getRequest({
    url: url,
    method: 'GET',
    data: data,
    header: header
  })
}

/**
 * 微信请求post方法封装
 * url
 * data 以对象的格式传入
 */
export function postRequest (url, data) {
  var postRequest = wxPromisify(wx.request)
  var header = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'x-requested-with': 'XMLHttpRequest'
  }
  if (url !== Constant.BASE_URL + '/scm/app/registerDriver' && url !== Constant.BASE_URL + '/scm/app/registerSupplier') {
    header.Authorization = store.getters.token
  } else {
    postRequest = wxCompletePromisify(wx.request)
  }
  return postRequest({
    url: url,
    method: 'POST',
    data: data,
    header: header
  })
}

2、在src下新建一个api文件夹——存所有请求接口（方便后续统一管理）

新建index.js文件（配置wx.request的config——格式化参数）代码如下

import { getRequest, postRequest } from '@/utils/promiseRequest'
import { Constant } from '@/utils/settingConfig'

export default (function request () {
  return function () {
    let args = Array.from(arguments)
    const config = args[0]
    const funcName = args[1]
    const data = args[2]
    if (typeof config[funcName] !== 'object') {
      throw new Error('调用api函数函数错误，请检查函数名称是否错误')
    }
    // 配置wx.request的config
    var newConfig = JSON.parse(JSON.stringify(config[funcName]))

    if (newConfig.method === 'post') {
      return postRequest(Constant.BASE_URL + newConfig.url, data)
    } else {
      return getRequest(Constant.BASE_URL + newConfig.url, data)
    }
  }
})()

新建apiPath文件（放置所有请求接口）代码如下

import request from '../index'

const config = {
  /**
   * 注册登录api
   */
  // 获取当前登录人信息
  getProfile: {
    url: '/dx-user/system/user/profile'
  },
  // 根据小程序openId校验用户是否已经绑定
  checkUser: {
    url: '/scm/app/checkUser'
  },
  // 根据code获取openId
  getOpenId: {
    url: '/scm/app/getOpenId',
    method: 'post'
  },
.....
}
export default function req (funcName, data) {
  return request(config, funcName, data)
}

3、全局挂载（在main.js文件如下添加）

import PromiseHttp from './api/apiPath/index'
Vue.prototype.$http = PromiseHttp

4、页面使用

 // 获取openid
    async getAsyncOpenId (parameter) {
      const res = await this.$http('getOpenId', parameter)
      if (res.success) {
        this.setOpenId(res.data.openId)
        this.setUnionId(res.data.unionId)
        this.getOpenId = res.data.openId
        this.getUnionId = res.data.unionId
        // 校验用户是否已经绑定
        this.checkUser(this.getOpenId)
      }
    },
    注释：
     1、this.$http 就是全局挂载的接口请求
     2、‘getOpenId’就是apiPath定义config接口名称
     3、‘parameter’就是后台需要的参数