关于uniapp请求封装的一篇文章🌟

开发小程序中，最先配置的肯定就是request请求了，但是官方提供的也太简单了吧，在实际项目中我们还是要配置很多东西的，接下来请看我展示😄

1. 用cli方式创建一个uniapp示例项目

我这里直接用vue3创建了 其他创建命令参考uniapp官网

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

2.src下新建config/request 文件夹，里面要写的是封装请求 MinRequest类 这个类用于发起 HTTP 请求，并提供了一些功能来优化配置管理、拦截器处理以及请求的构建和发送。

// 创建service.js文件 用于封装我们的request请求
import { config } from './config';
import qs from 'query-string';

class MinRequest {
  config = {
    baseURL: '',
    headers: {
      'content-type': 'application/json',
      accept: 'application/json'
    },
    method: 'GET',
    dataType: 'json',
    responseType: 'text'
  };

   requestBefore = (config) => config;
   requestAfter = (response) => response;

  interceptors = {
    request: (func) => {
      this.requestBefore = func || this.defaultRequestBefore;
    },
    response: (func) => {
      this.requestAfter = func || this.defaultRequestAfter;
    }
  };

   defaultRequestBefore(config) {
    return config;
  }

   defaultRequestAfter(response) {
    return response;
  }

  isCompleteURL(url) {
    return /^(http|https):\/\/[\w.]+\S*$/.test(url);
  }

  setConfig(func) {
    this.config = func(this.config);
  }

   constructURL(options) {
    if (!this.isCompleteURL(options.url)) {
      options.url = `${options.baseURL}${options.url}`;
    }

    if (options.method === 'GET' && options.params) {
      options.url += `?${qs.stringify(options.params, { arrayFormat: 'bracket' })}`;
      delete options.params;
    }
  }

   handleEnvironment(options) {
    let env = 'dev';
    const Version = uni.getAccountInfoSync().miniProgram.envVersion;

    if (Version === 'release') {
      console.log('线上版本');
      env = 'pro';
    } else if (Version === 'trial') {
      console.log('体验版');
      env = 'dev';
    } else if (Version === 'develop') {
      console.log('开发版');
      env = 'base';
    }

    options.baseURL = config.base_url[env][options.baseURL];
  }

  request(options = {}) {
    const token = '123456'; // 传入token

    options.headers = {
      authorization: `Bearer ${token}`,
      token
    };

    this.handleEnvironment(options);
    this.constructURL(options);

    const mergedOptions = {
      ...this.config,
      ...options,
      headers: {
        ...this.config.headers,
        ...options.headers
      }
    };

    return new Promise((resolve, reject) => {
      uni.request({
        ...mergedOptions,
        success: (res) => resolve(this.requestAfter(res)),
        fail: (err) => reject(this.requestAfter(err))
      });
    });
  }

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

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

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

  patch(options = {}) {
    return this.request({ ...options, method: 'PATCH' });
  }

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

export default MinRequest;

配置管理：

• 使用 config 对象来管理基础 URL、默认请求头等配置。
• setConfig 方法允许动态更新配置。

拦截器处理：

• 支持请求和响应拦截器，通过 interceptors 属性配置。
• requestBefore 和 requestAfter 方法用于处理请求前和响应后的逻辑。

URL 处理和环境管理：

• isCompleteURL 方法用于检查是否为完整 URL。
• handleEnvironment 方法根据小程序的运行环境动态设置 baseURL。

请求方法简化：

• request 方法统一处理请求，包括合并配置、添加请求头、处理 URL 等。
• 提供了 get、post、put、patch 和 delete 方法，用于发送对应 HTTP 请求。

3.创建一个请求配置的参数对象config，base用于开发环境、dev测试/体验版环境、pro对应线上，下面的是一些常用状态码，用于前端使用去做一些响应处理

// 写admin为key是因为后端可能有多个服务，我们后期可以根据服务不同去请求不同的接口
const config = {
  /**
   * api请求基础路径
   */
  base_url: {
    // 开发环境接口前缀
    base: {
      admin: 'https://base.com'
    },

    // 打包开发环境接口前缀
    dev: {
      admin: 'https://dev.com'
    },

    // 打包生产环境接口前缀
    pro: {
      admin: 'https://pro.com'
    },

    // 打包测试环境接口前缀
    test: '/'
  },

  /**
   * 接口成功返回状态码
   */
  result_code: 0,

  /**
   * 接口成功返回需重新登录状态码
   */
  error_code: 100,

  /**
   * 接口请求超时时间
   */
  request_timeout: 60000,

  /**
   * 默认接口请求类型
   * 可选值：application/x-www-form-urlencoded multipart/form-data
   */
  default_headers: 'application/json'
}

export { config }

4.以上都准备好之后，就可以去封装我们项目的请求文件了，新建index.js 这个就跟平常用的axios很像了，这里可以自己根据项目需求自行调整

import MinRequest from './service'
import { config } from './config'

const minRequest = new MinRequest()

// 状态码
const { result_code, error_code } = config

// 请求拦截器
minRequest.interceptors.request((request) => {
  if (!request.hiddenLoading) {
    uni.showLoading({
      title: '加载中',
      mask: true
    })
  }
  return request
})

// 响应拦截器
minRequest.interceptors.response((response) => {
  uni.hideLoading()
  if (response && response.data) {
    if (response.data.code === result_code) {
      return response.data
    }
    if (response.data.code === error_code) {
      // 错误码处理
    } else {
      uni.showToast({
        title: response.data.message || response.data.msg,
        icon: 'none'
      })
    }
  }
  return response.data
})

export default minRequest

好了我们现在可以去试一下了，找一个免费的api贴到我们项目中去，并使用封装好的请求器

这套封装也可以用于其他平台，需要做的是使用uniapp的条件判断来兼容一下

git地址

注：该文章仅用于技术交流，不存在任何商业行为