UniApp 封装全局请求示例并配置拦截器以及错误回调指南

✨求关注~
😀博客：www.protaos.com

本文将介绍如何在 UniApp 中封装全局请求示例，并配置请求拦截器和错误回调函数，以>便统一处理网络请求、添加请求头、处理错误等功能。通过本指南，你将学习如何优化请>求流程并提高代码的可维护性。

代码实现：

1. 首先，确保你已经创建了一个 UniApp 项目。

2. 在项目的根目录下创建一个新文件夹 api，然后在该文件夹中创建 request.js 文件，作为请求封装的入口文件。

3. 在 request.js 文件中，编写请求封装的代码：

import { BASE_URL } from './config'; // 导入请求的基础 URL

// 封装请求方法
function request(url, method, data) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/json', // 设置请求头
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

// 配置请求拦截器
uni.addInterceptor('request', {
  // 在发送请求之前做一些处理
  config(requestConfig) {
    // 添加请求头、身份验证等
    requestConfig.header.Authorization = 'Bearer ' + uni.getStorageSync('token');
    return requestConfig;
  },
  // 请求发生错误时的处理
  fail(error) {
    console.error('请求失败:', error);
  },
});

export default request;

4. 在需要发起网络请求的页面或组件中引入 request.js 并使用封装的 request 方法：

import request from '@/api/request.js';

// 发起请求示例
request('/api/user', 'GET', {})
  .then((res) => {
    console.log('请求成功:', res);
  })
  .catch((err) => {
    console.error('请求失败:', err);
  });

推荐学习文档或官方教程：

1. UniApp 官方文档：https://uniapp.dcloud.io/
2. uni.request API 文档：https://uniapp.dcloud.io/api/request/request

总结：

通过按照上述步骤，在 UniApp 中封装全局请求示例并配置拦截器和错误回调函数非常简单。首先，创建一个请求封装的入口文件，并在其中编写请求封装的代码，设置请求头、处理请求结果等。然后，在需要发起网络请求的页面或组件中引入封装的请求方法，并进行相应的调用。UniApp 的官方文档和 uni.request API 文档是学习和深入了解更多关于 UniApp 请求和