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

✨求关注~

😀博客：www.protaos.com

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

代码实现：

1. 首先，确保你已经创建了一个 UniApp 项目。
2. 在项目的根目录下创建一个新文件夹 api，然后在该文件夹中创建 request.js 文件，作为请求封装的入口文件。
3. 在 request.js 文件中，编写请求封装的代码：

import{BASE_URL}from'./config';// 导入请求的基础 URL// 封装请求方法functionrequest(url, method, data){returnnewPromise((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);},});exportdefault request;

1. 在需要发起网络请求的页面或组件中引入 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 请求和