「这是我参与2022首次更文挑战的17天，活动详情查看：2022首次更文挑战」

一、为何要封装请求？

我们先来看一下传统方式请求接口：

  onLoad: function (options) {
    wx.request({
      url: 'http://...',
      method: 'GET',
      data: {
        offset: 0,
        limit: 10
      },
      success: (res) => {
        console.log(res)
        this.setData({list: res.data.data})
      },
      fail: function(err) {
        console.log(err)
      }
    })
  },

在每次调取接口时，都要写大块的代码未免有些冗余、麻烦。那么我们为何不封装一下请求接口逻辑，将代码变得清晰明了呢？

二、如何封装请求？

2-1、明确需要接收的参数

大致包括：url（请求地址）、method（请求方式：GET、POST...）、data（请求参数）等。

2-2、明确响应方式

在传统调取接口方式中，响应内容通过success回调函数（成功时）与fail回调函数（失败时）告知。

那么在封装的方法中接收到了响应内容后，如何返回呢？

至此，可考虑采用返回一个Promise的方式，将成功回调中接收到的响应内容放至resolve中，将失败回调中接收到的响应内容放至reject中；这样，在外侧调取封装的请求方法后通过.then和.catch就可获取到成功时的返回结果和失败时的返回结果啦！

2-2-1、完善封装方法

创建service/index.js：

/**请求接口的封装 */
const BASE_URL = "http://123.123.123.123:9000"
class KRequest {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  request(url, method, params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.baseURL + url,
        method: method,
        data: params,
        success: function(res) {
          resolve(res.data)
        },
        fail: function(err) {
          reject(err)
        }
      })
    })
  }

  get(url, params) {
    return this.request(url, "GET", params)
  }

  post(url, data) {
    return this.request(url, "POST", data)
  }
}

const kRequest = new KRequest(BASE_URL)
export default kRequest

2-2-2、调取封装的方法

import kRequest from '../../service/index'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  /**
   * 生命周期函数--监听页面加载
   * 类似于vue的created
   */
  onLoad: function (options) {
    kRequest.get('/list', {offset: 0, limit: 10}).then(res => {
      this.setData({list: res.data})
    })
  },
})

2-3、采取分层思想完善封装

我们知道，在小程序中会有多个功能模块，每个功能模块都会调取大量不同的接口，而每个接口的地址与接收参数是固定的。所以，基于此，我们可以考虑再进行一层封装，只需要调取最终封装的方法，传入参数值即可：

在service下创建不同模块对应的api.js：

import kRequest from './index'

export function apiGetList(offset, limit=10) {
  return kRequest.get('/list', {
    offset,
    limit
  })
}

此时，在对应页面的js中，可以直接使用导出的对应的接口调取方法即可：

import { apiGetList } from '../../service/api_list'
Page({
  data: {
    list: []
  },
  onLoad: function (options) {
    apiGetList(0).then(res => {
      this.setData({list: res.data})
    })
  },
})

当然，也可以采取async await语法糖形式来写：

  onLoad: async function (options) {
    const res = await apiGetList(0)
    this.setData({list: res.data})
  }

至此，我们就封装完成啦！

小程序必备技巧(1)-结合Promise封装接口请求