vant在拦截器中全局添加loading

接口请求时候加载loading,这里使用的vue+vant

第一种方法直接在请求文件中添加loading加载

import axios from 'axios'; 
import { Toast } from 'vant';
const instance = axios.create({
    baseURL: 'xxx',
    timeout: 100000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
});

let loading        
function startLoading() {   
    loading = Toast.loading({
        message: '加载中...',
        forbidClick: true,
    })
}

function endLoading() {    
    loading.clear()
}
// 添加请求拦截器
instance.interceptors.request.use(config => {
    startLoading();
    return config
}, error => {
    return Promise.reject(error)
});

//响应拦截器
instance.interceptors.response.use(response => {
    endLoading();
    return response.data
})
export default instance

  

第二种,配合vuex来实现

 

posted @ 2022-06-30 13:11  紫诺花开  阅读(2678)  评论(0)    收藏  举报