化繁为简：详解UniApp请求库的封装奥秘

2024-01-12 10:32:11

前言

UniApp作为跨平台开发框架，深受开发者的喜爱。它基于Vue.js，能够轻松构建出可在iOS、Android、H5等多平台运行的应用。UniApp提供了丰富的API，其中uni.request(OBJECT)是进行网络请求的重要接口。为了让网络请求更加方便、灵活，我们可以对uni.request(OBJECT)进行封装，从而形成一个更强大的请求库。

封装策略

在封装UniApp请求库时，我们需要考虑以下几个方面：

通用性： 封装后的请求库应该能够支持各种类型的网络请求，如GET、POST、PUT、DELETE等。
灵活性： 封装后的请求库应该能够灵活配置请求参数，如请求头、请求体、超时时间等。
可配置性： 封装后的请求库应该允许开发者自定义请求拦截器和响应拦截器，以便在请求发送之前或响应返回之后对请求或响应进行处理。
异步性： 封装后的请求库应该支持异步请求，以便开发者能够在请求发出后继续执行其他任务，而无需等待请求返回。

基于Promise和class的封装

为了实现上述封装策略，我们可以使用Promise和class来对uni.request(OBJECT)进行封装。Promise是一种异步编程的解决方案，它允许我们以同步的方式编写异步代码。class是一种面向对象编程的概念，它允许我们将数据和行为组织成对象。

// uni-request.js
import { Promise } from 'es6-promise';

class UniRequest {
  constructor() {
    this.interceptors = {
      request: [],
      response: [],
    };
  }

  request(options) {
    // 请求拦截器
    this.interceptors.request.forEach((interceptor) => {
      options = interceptor(options);
    });

    return new Promise((resolve, reject) => {
      uni.request({
        ...options,
        success: (res) => {
          // 响应拦截器
          this.interceptors.response.forEach((interceptor) => {
            res = interceptor(res);
          });
          resolve(res);
        },
        fail: (err) => {
          reject(err);
        },
      });
    });
  }

  get(url, options = {}) {
    return this.request({
      ...options,
      url,
      method: 'GET',
    });
  }

  post(url, data = {}, options = {}) {
    return this.request({
      ...options,
      url,
      method: 'POST',
      data,
    });
  }

  put(url, data = {}, options = {}) {
    return this.request({
      ...options,
      url,
      method: 'PUT',
      data,
    });
  }

  delete(url, options = {}) {
    return this.request({
      ...options,
      url,
      method: 'DELETE',
    });
  }

  // 请求拦截器
  useRequestInterceptor(interceptor) {
    this.interceptors.request.push(interceptor);
  }

  // 响应拦截器
  useResponseInterceptor(interceptor) {
    this.interceptors.response.push(interceptor);
  }
}

export default new UniRequest();

使用方法

封装后的请求库使用起来非常简单，我们只需要在项目中引入uni-request.js文件，然后就可以使用UniRequest对象来发送网络请求了。例如：

import uniRequest from './uni-request';

uniRequest.get('https://example.com/api/v1/users').then((res) => {
  console.log(res);
});

uniRequest.post('https://example.com/api/v1/users', {
  name: 'John Doe',
  email: 'johndoe@example.com',
}).then((res) => {
  console.log(res);
});