如何封装 Taro.request 请求？

推荐答案

// www.javascriptcn.com code example
import Taro from '@tarojs/taro';

const request = (options) => {
  const { url, method = 'GET', data = {}, header = {} } = options;

  return new Promise((resolve, reject) => {
    Taro.request({
      url,
      method,
      data,
      header,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

export default request;

本题详细解读

1. 封装目的

封装 Taro.request 的主要目的是为了简化请求代码，统一处理请求的成功和失败逻辑，减少重复代码，提高代码的可维护性。

2. 代码结构

• 参数解构：通过解构赋值从 options 中提取 url、method、data 和 header 等参数，并设置默认值。
• Promise 封装：使用 Promise 封装 Taro.request，使得调用者可以使用 async/await 或 .then/.catch 来处理异步请求。
• 成功与失败处理：在 success 回调中，判断 statusCode 是否为 200，如果是则 resolve 返回的数据，否则 reject 返回的响应对象。在 fail 回调中，直接 reject 错误对象。

3. 使用示例

// www.javascriptcn.com code example
import request from './request';

const fetchData = async () => {
  try {
    const response = await request({
      url: 'https://api.example.com/data',
      method: 'GET'
    });
    console.log('Data:', response);
  } catch (error) {
    console.error('Error:', error);
  }
};

fetchData();

4. 扩展性

• 拦截器：可以在封装的基础上进一步添加请求拦截器和响应拦截器，统一处理请求前的参数处理和响应后的数据处理。
• 超时处理：可以在 Taro.request 中添加 timeout 参数，处理请求超时的情况。
• 全局配置：可以通过全局配置统一设置 baseURL、headers 等参数，减少每次请求的配置代码。