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

这篇具有很好参考价值的文章主要介绍了UniApp 封装全局请求示例并配置拦截器以及错误回调指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

代码实现：

首先，确保你已经创建了一个 UniApp 项目。
在项目的根目录下创建一个新文件夹 api，然后在该文件夹中创建 request.js 文件，作为请求封装的入口文件。
在 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;

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

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

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

总结：

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

到了这里，关于UniApp 封装全局请求示例并配置拦截器以及错误回调指南的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！