超级好用的支付宝小程序网络请求封装async/await

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

此封装方法的优点：

1、实现async/await ; (小程序对async已经有非常好的支持，async也是目前公认的解决异步和回调地狱的终极解决方案)

2、具有高度的可配置性，不管你是定好的baseUrl，还是对接多个系统的Url都非常简单；

3、利用解构参数的特点使得参数的可读性非常强，极大降低后期维护成本，让所有请求变成一眼题；

4、遵循类名首字母大写的驼峰，实例驼峰的规则，也在一定程度上极大的降低维护成本；

5、可在底层做全局异常处理，感受一劳永逸的魅力；

1.在utils下新建 http.js

class HTTP {

  base_url = 'http://xxxx/' // 改成请求的地址

  get(url, data, config) {
    return this._request({
      url,
      data,
      config,
      method: 'GET'
    })
  }

  post(url, data, config) {
    return this._request({
      url,
      data,
      config,
      method: 'POST'
    })
  }

  static _isHttp(url) {
    return url.substr(0, 4).toLowerCase() === "http"
  }

  _request({ url, data, config, method }) {
    const token = my.getStorageSync({
      key: 'token', // 缓存数据的key
    }).data
    const is_http = HTTP._isHttp(url)
    // 未传入headers 
    let headers = {
      'content-type': 'application/json'
    }
    return new Promise((resolve, reject) => {
      my.request({
        headers: Object.assign(headers, {
          'X-Token': token || ''
        }),
        url: is_http ? url : this.base_url + url,
        data,
        method,
        ...config,
        success: (res) => {
          if (res.data.resultCode !== '200') {
            my.showToast({
              type: 'exception',
              content: res.data.message,
              duration: 2000
            });
          }
          resolve(res)
        },
        fail: (res) => {
          my.showToast({
            type: 'exception',
            content: '网络异常',
            duration: 2000
          });
          reject(res)
        }
      })
    })
  }
}

export { HTTP }

2.根目录新建一个文件夹modules，新建文件 modules/user.js，继承封装的http类

import { HTTP } from '../utils/http'

class UserModel extends HTTP {

  get_sms_code({
    appCode,
    mobile
  }) {
    console.log(this.x)
    return this.post('app_user/v1/get_sms_code', {
      appCode,
      mobile
    })
  }
}

export { UserModel }

3.页面中使用如pages/login.js

import { UserModel } from '../../modules/user'
const userModel = new UserModel()

Page({

    onLoad(){
      this.get_sms_code()
    },
    
    async get_sms_code() {
      const res = await userModel.get_sms_code({
        appCode: '123456',
        mobile: '157xxx40150'
      })
     console.log(res)
  }

})