Question

当用户登陆其仪表板时，我想加载一些小部件，而我将通过axios进行操作。我想在读取数据时显示一个加载微调器。经过一番挖掘后，看来方法是使用axios拦截器。（我认为）看起来好像我可以使用它，但是我不知道应该在哪里处理响应，因为两种方法都可以执行。

这是第一种有效的方法：

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    // Do I need this?
})
.catch(err => console.log(err));

第二种方法也有效。但是，看来我实际上根本不需要.then（）和.catch（）块吗？

axios.interceptors.request.use((config) => {
    console.log('Start Ajax Call');
    FreezeUI();
    return config;
}, (error) => {

    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    console.log('Done with Ajax call');
    return response;

}, (error) => {
    return Promise.reject(error);
});

axios.get('/account/active-listings')
.then(response => {
    document.querySelector('.test').insertAdjacentHTML('afterbegin', response.data.html);
    UnFreezeUI();
})
.catch(err => console.log(err));

Answer 1

我不确定我是否正确，但是我认为您正在寻找的是onDownloadProgress选项，您可以在请求配置中添加该选项。这是一个您可以实现的函数，该函数接收progressEvent。在该功能中，您可以设置微调器。

看看their github page上的请求配置部分

为清楚起见的小例子：

axios.get('/account/active-listings', {
    onDownloadProgress: (pe) => document.querySelector('.place-to-insert-spinner').insertAdjacentHTML(loading spinner thingie)
})

编辑：您的请求完成后，您可能也应该删除微调器。

在axios使用.get

1 个答案: