在微信小程序中封装axios.
使用Promise方法的原理,基本原理如下:
// 封装请求的基地址
const baseURL = "https://XXXXXX";
// 请求的计数器 -- 不加计数器的话会显示三次/隐藏三次 loading, 加了计数器之后,只当所有请求完成之后只需要隐藏一次loading
let requestCount = 0;
// 1.axios 是个函数,
const axios = (params) => {
// 累计请求计数器
requestCount++;
// 调用axios发送请求的时候,导航栏显示loading
wx.showNavigationBarLoading();
// 2. 函数内部返回Promise 对象
return new Promise((resolve, reject) => {
// 3.wx.request() 小程序发送请求
wx.request({
// 把调用axios时传过来的所有参数解构赋值
...params,
// 将基地址和请求的地址拼接起来
url: baseURL + params.url,
// 请求成功之后调用的函数
success: (result) => {
// resolve(result)
// 这里优化一下 -- 如果不需要显示其他返回的数据,而且这个项目后台所有返回的数据都是data.message的格式,我们就可以在封装axios的时候把返回的数据解构出来,这样的话,在请求的时候就会直接返回数据给我们了,就没有这么层数据的嵌套了
if (result.data.message) {
resolve(result.data.message)
} else {
resolve(result)
}
},
// 请求失败之后调用的函数
fail: (error) => {
reject(error)
},
complete: () => {
// 每次请求完成,就是所有的请求都完成了
requestCount--;
if (requestCount === 0) {
// 隐藏导航栏显示的loading
wx.hideNavigationBarLoading();
}
}
});
});
}
// 导出 axios 函数
export default axios;
// 在其他的文件中就可以导入使用了, 最好是按需导入(局部导入)
// import 语句只支持相对路径 -- 导入自己封装的axios -- 局部
//导入语法:
import axios from "../../request/myAxios"
封装axios的时候使用微信 loading 组件的优化:
在封装axios请求的时候,如果想在每次请求的时候在导航栏的时候显示loading,有几次请求就会显示几次loading,如果是隐藏的话,有几次请求完成就隐藏几次loading.
如果是在这里加一个计数器requestCount,每次请求都让这个计数器requestCount++,然后在每一次请求完成的时候在 wx.request 中的 complete:()=>{} 方法 让计数器requestCount--,然后在requestCount===0的时候在隐藏loading,这样的话就可以让原来的请求三次就会显示隐藏三次的loading,优化成了请求三次会显示三次loading,当页面请求全部完成的时候再隐藏loading,这时候只需要隐藏一次.