在微信小程序中封装axios,以及在微信小程序中axios使用loading组件的优化

在微信小程序中封装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,这时候只需要隐藏一次.