本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

@escook/request-miniprogram 安装、配置、使用

官方文档：www.npmjs.com/package/@es… 最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

安装@escook/request-miniprogram：

npm install @escook/request-miniprogram

导入

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

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

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

使用

// 发起 GET 请求，data 是可选的参数对象
$http.get(url, data?)

// 发起 POST 请求，data 是可选的参数对象
$http.post(url, data?)

// 发起 PUT 请求，data 是可选的参数对象
$http.put(url, data?)

// 发起 DELETE 请求，data 是可选的参数对象
$http.delete(url, data?)

配置请求根路径

$http.baseUrl = 'https://www.xxxx'

请求拦截器

$http.beforeRequest = function (options) {
  // do somethimg...
}

实例应用#配置网络请求：

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

 封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

2.今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

async getSwiperList() {
   const { data: res } = await uni.$http.get('/api/xxxxxxx')
   if (res.meta.status !== 200) return uni.$showMsg()
 
   //获取数据
   this.swiperList = res.message
}