uni-app_开发小程序的网络请求配置（第三方包 @escook/request-miniprogram）-优快云博客

本文链接：https://blog.youkuaiyun.com/QiuRenBB/article/details/125170430

本文介绍了在uni-app中如何使用第三方包@escook/request-miniprogram进行小程序的网络请求配置，以替代不支持axios且功能简单的wx.request()。通过初始化包管理文件、安装包和在main.js中导入使用，实现更强大的请求功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

由于平台的限制，小程序项目中不支持axios，而且原生的wx.request()API功能比较的简单，不支持请求拦截等全局定制的功能。因此，建议在uni-app项目中使用第三方包
@escook/request-miniprogram 来发起网络数据请求。
官方文档请点击链接查看→

步骤

①、选中项目根目录，打开控制台，初始化一个包管理文件

npm init -y

②、安装包

npm install @escook/request-miniprogram

③、在main.js中导入并使用

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

// 请求的根路径
$http.baseUrl = 'https://wwww.xxxxxxxx.com'

// 请求拦截器
$http.beforeRequest = function (options) {
  uni.showLoading({
	  title: "数据加载中..."
  })
}

// 响应拦截器
$http.afterRequest = function () {
  uni.hideLoading()
}

使用

//获取轮播图数据
async getSwiperList() {
      // 1、 发起请求（请求返回的是一个promise对象，我们可以用async和await来做优化）
      const { data: res } = await uni.$http.get('/api/xxx/xxx/xxx/swiperData')
      console.log('查看请求的结果=>>',res);
      // 2、 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3、 请求成功，为 data 中的数据赋值
      this.swiperList = res.message;
    },