微信小程序——接口请求封装

smilewlm
3,494 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

在微信小程序里发起后端接口请求时，需要使用微信小程序提供的原生api(wx.request)，此api通过成功和失败的回调函数来进行接口数据的响应，在调用时容易产生回调地狱，代码也不够优美，所以对此api进行promise封装，请求时代码就会比较优美和简单。另外，一些公共的接口请求参数和错误处理也需要进行统一封装。

wx.request简介

在用wx.request进行接口请求时，大致代码如下：

wx.request({
  url: 'example.php', //仅示例，并非真实地址
  data: {},
  header: {},
  success (res) {
    console.log(res.data)
  },
  fail(error) {}
})

wx.request的具体参数含义可以参照微信小程序开发文档，这里不再概括。

可以看到在用wx.request进行请求时，在成功的回调函数中通过res.data可以获取响应数据，如果在开发的业务中有需要通过响应信息再次发起请求时，代码就会比较复杂，另外header里面一般我们有一些公共的信息（用户token、系统版本等），这个也不能每次调用的时候单独传入。

封装

  1. 抽取一个class类，里面包含get请求方法、post请求方法和通用请求函数，如下：

request.js文件：

class RequestModel {
  static request(options = {}) {}
  static get(options) {
    return this.request(options);
  }
  static post(options) {
    options.method = 'POST';
    return this.request(options);
  }
}
export default RequestModel;

2.request请求方法封装

  • 设置一些公共的header请求头，根据自己的后端接口要求进行添加，其余某个接口特殊的请求头信息，可以单独放在请求参数中，然后和公共请求头进行拼接；
  • 接口域名API_DOMAIN通过环境变量进行配置（不同环境域名不一样），然后通过环境变量获取到对应环境的配置项，这里根据自己的配置引入request方法里即可；
  • 该方法返回一个Promise，如果接口请求报错，则进行一些统一的错误处理，例如401、500、400等，然后直接reject()，如果接口请求成功(返回code是200)，则直接将响应的数据resolve()即可，这里我们直接将dataMap数据进行返回，在调用接口时不需要在进行code是200的判断
static request(options = {}) {
    const { url, header: optHeader, ...otherOpts } = options
    const header = Object.assign({
      'content-type': 'application/json', // 默认值
      'ver': '1.0',
      'source': 'h5',
      'token': session,
    }, optHeader)
    const tmpUrl = `${API_DOMAIN}${url}`;
    return new Promise((resolve, reject) => {
      wx.request({
        header,
        ...otherOpts,
        url: tmpUrl,
        success(res) {
          let response = res
          // 这里进行code异常处理
          const exceptionError = exception(response);
          if (exceptionError) {
            reject(exceptionError);
            return;
          }
          if (`${res.data.code}` !== '200') {
            reject(res.data);
          } else {
            resolve(res.data.dataMap);
          }
        },
        fail(err) {
          reject(err);
        }
      });
    });
  }

使用

// api.js
import RequestModel from './request'
export default getData(params) {
  return RequestModel.get({
    url: '/get/list',
    data: params
  })
}

// index.js
import { getData } from '../../api.js'
async fetchData(id) {
  const dataMap = await getData({id})
}

在使用封装的接口请求时：

  • 首先在接口定义中，我们直接调用RequestModel中封装的get方法，只需要定义接口的地址和接口需要传入的参数；
  • 然后在页面js文件中引入我们需要调用的接口方法getData，因为getData返回的是一个promise请求，所以我们可以直接使用async/await，然后拿到接口返回的数据，就可以进行业务处理了
  • 如果有一些特殊的业务code（不在统一处理的错误code中）需要处理，那么我们可以在调用的时候加一个catch处理，例如： await getData().catch(()=>{})。

可见，上述的接口调用比直接使用微信小程序原生api的代码要更加简单明了以及优雅。

avatar
文章
阅读
粉丝