微信小程序网络请求的封装与填坑之路

为什么要封装网络请求

微信小程序的网络请求和常见的前端框架（如React，Vue等）的网络请求并不一样，其API的使用方式和参数需要开发者进行适配，使得开发效率和代码可维护性降低。同时，我们在进行小程序开发的过程中，会经常需要进行网络请求，如果每次都需要写重复代码，则会降低开发效率，也容易出现冗余问题。因此，封装网络请求显得尤为必要，可以提高代码可读性，也方便维护。

封装网络请求的步骤

以下是封装网络请求的步骤：

1. 安装 axios

在小程序中需要使用 axios 来进行网络请求的封装，因此需要使用 npm 包管理工具进行安装：

npm install axios

2. 新建 request.js 文件

我们需要新建一个 request.js 文件来对 axios 进行封装，使得我们在小程序中可以更加方便的使用 axios 进行网络请求。

const axios = require('axios')

const request = axios.create({
  baseURL: '' // 设置请求的 baseUrl，比如 https://api.xxx.com
  timeout: 10000 // 设置请求超时时间
})

// 添加拦截器
request.interceptors.request.use(
  config => {
    // 请求前的操作，比如在每个请求头中添加 token 等
    const token = wx.getStorageSync('token')
    if (token) {
      config.headers.common['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 封装网络请求方法
const http = {
  get: (url, params) => request.get(url, { params }),
  post: (url, data) => request.post(url, data),
  put: (url, data) => request.put(url, data),
  delete: (url) => request.delete(url)
}

module.exports = http

在上述代码中，我们首先导入了 axios，并且通过 axios.create 创建了一个实例 request，通过 interceptors.request.use 来实现请求前的拦截操作，最后通过 http 来封装了常见的 http 方法。

3. 在小程序中使用

在小程序中使用 http 方法时，只需要导入 http 并调用对应的方法即可：

const http = require('request.js')

http.get('/api/user', { id: 1 }).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

常见问题及解决

1. 微信小程序没有跨域限制，为什么需要设置 baseURL

在进行小程序开发时，我们很容易会遇到跨域问题。虽然微信小程序开放了跨域限制，但是在实际开发中，我们如果要使用接口，则需要使用到服务器的地址。因此，设置 baseURL 可以方便我们进行接口调用，而避免跨域问题。

2. axios 拦截器的作用

在封装网络请求时，我们需要对请求进行一些公共处理，比如在每个请求头中添加 token、设置请求超时时间、对请求错误进行统一处理等。而 axios 的拦截器则可以帮我们进行这些操作，从而减少代码重复率，同时也提高了代码可维护性。

示例说明

示例1：获取用户信息

const http = require('request.js')

http.get('/api/user', { id: 1 }).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

这个示例是一个 GET 请求，请求路径为 /api/user，并且传递了参数 { id: 1 }。我们可以在 request.js 中对应的方法体内进行适配。

示例2：提交表单信息

const http = require('request.js')

http.post('/api/form', { name: 'Tom', age: 18 }).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

这个示例是一个 POST 请求，请求路径为 /api/form，并且向服务器提交了一个表单信息 { name: 'Tom', age: 18 }，我们可以在 request.js 中对应的方法体内进行适配。