【微信小程序】uni-app 配置网络请求

奔跑的小G2024-06-08 21:32

原因

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

步骤

1.在项目文件夹，打开终端，执行 npm init -y ,生成 package.json 文件

2.在项目文件夹中，执行 npm install @escook/request-miniprogram

3.在项目的main.js入口文件中，通过如下的方式进行配置：

参考官方文档:https://www.npmjs.com/package/@escook/request-miniprogram

javascript 复制代码

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

// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
wx.$http = $http

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

//配置请求根路径
$http.baseUrl='https://www.uinav.com'
//请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}
//请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}