uni-app开发小程序 使用@escook/request-miniprogram配置网络请求

https://blog.csdn.net/weixin_39411655/article/details/115565689

 

1.因为小程序中无法使用axios，而wx.request功能过于简单，所以下载加强版网络请求包：
npm init -y 在项目根目录初始化package.json文件

npm i @escook/request-miniprogram -S 下载网络请求包

2.打开main.js入口文件
import { $http } from '@escook/request-miniprogram'
//从网络请求包中引入$http请求对象
uni.$http = $http
//因为在其他的页面或组件中也要使用，所以要将$http对象挂载到全局对象下，在uni-app中，uni是全局对象
$http.baseUrl = 'https://www.baidu.com'
//配置网络请求基础地址，因为uni.$http为$http的引用，所以可以直接修改$http对象下的属性
$http.beforeRequest = function() {
//配置发起网络请求前的拦截功能
uni.showLoading({
title: '加载中...'
})
}
$http.afterRequest = function() {
//配置网络请求完毕后的拦截功能
uni.hideLoading()
}

// 封装请求失败提示信息
uni.$showMsg = function(title='数据加载失败',duration=1500){
uni.showToast({
title,
duration,
icon:'none'
})
}

3.发起网络请求
async getFloorList(){
const {data:{message,meta}} = awa uni.$http.get('/api')
if(meta.status !== 200) return uni.$showMsg()
this.list= message
},
————————————————
版权声明：本文为CSDN博主「panliyou」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39411655/article/details/115565689

 

 

 

/*小程序项目中, 不支持 axios, 而且原生的 wx.request() API功能较为简单, 不支持拦截器等全局定制的功能. 因此,
建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。*/
[官方文档](https://www.npmjs.com/package/@escook/request-miniprogram)
// 1. 初始化项目
npm init -y
// 2. 安装 @escook/request-miniprogram
npm install @escook/request-miniprogram
// 3. 使用方式(在项目的 main.js 入口文件中, 通过如下的方式进行配置)
import { $http } from '@escook/request-miniprogram'

uni.$http = $http // 把 $http 挂载到 uni 顶级对象之上

$http.baseUrl = 'https://www.example.com' // 配置请求根目录

$http.beforeRequest = function (options) { // 请求拦截器
// do somethimg...
}

$http.afterRequest = function () { // 响应拦截器
// do something...
}
————————————————
版权声明：本文为CSDN博主「夕心o」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38779317/article/details/120123924