axios请求拦截 做Loading加载作用

可以通过在请求拦截器中添加一个Loading组件来实现Loading加载的效果。在请求开始时显示Loading组件，在请求结束时隐藏Loading组件。以下是一个示例代码：

import axios from 'axios';
import Loading from './Loading';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

instance.interceptors.request.use(config => {
  Loading.show();
  return config;
});

instance.interceptors.response.use(response => {
  Loading.hide();
  return response;
});

export default instance;

在这个示例中，我们创建了一个名为instance的axios实例，并在请求拦截器和响应拦截器中添加了Loading组件的显示和隐藏。在请求开始时，我们调用Loading.show()方法显示Loading组件，在请求结束时，我们调用Loading.hide()方法隐藏Loading组件。

请注意，这只是一个示例代码，实际实现可能会因具体情况而异。

相关问题

vant在请求拦截中使用loading指令

在引用的代码中，第一部分是一个名为`api.js`的文件，其中定义了两个方法`getuserInfo`和`getuserInfos`，分别用于发送请求并获取用户信息。其中，`getuserInfo`方法使用了默认的请求方式，而`getuserInfos`方法使用了加载动画的请求方式。

在第二部分的代码中，是一个名为`home.vue`的页面文件。该页面中有两个点击事件，分别是`btnloading`和`btn`。其中，`btnloading`调用了`getuserInfos`方法来发送请求，并在控制台打印返回的数据。而`btn`调用了`getuserInfo`方法来发送请求，并同样在控制台打印返回的数据。

根据上述代码，可以看出在请求拦截中使用了`loading`指令，具体是在`getuserInfos`方法中使用了带有加载动画的请求方式。也就是说，当调用`getuserInfos`方法时，会显示一个加载动画，直到请求完成后才会消失。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [axios+vant封装（加载loading动画和不加载loading动画）](https://blog.csdn.net/weixin_39338852/article/details/115617324)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [在微信小程序中使用vant的方法](https://download.csdn.net/download/weixin_38521831/12941081)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

Vue.js 通过 Axios 发送 POST 请求时触发加载动画

可以通过在发送 POST 请求时，在请求头中添加一个标记，然后在接收响应时再移除这个标记。在 Vue.js 中，可以使用 Axios 的拦截器来实现这个功能。

首先，在 Vue.js 中引入 Axios：

import axios from 'axios';

然后，定义一个 Axios 实例：

const axiosInstance = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

接下来，在 Axios 实例中添加请求拦截器：

axiosInstance.interceptors.request.use(config => {
  // 在请求头中添加一个标记
  config.headers['X-Loading'] = true;
  return config;
}, error => {
  return Promise.reject(error);
});

在请求拦截器中，可以在请求头中添加一个名为 X-Loading 的标记。这个标记的值可以是任意值，我们可以通过这个标记来判断是否需要显示加载动画。

接着，在 Axios 实例中添加响应拦截器：

axiosInstance.interceptors.response.use(response => {
  // 移除请求头中的标记
  delete response.config.headers['X-Loading'];
  return response;
}, error => {
  delete error.config.headers['X-Loading'];
  return Promise.reject(error);
});

在响应拦截器中，可以移除请求头中的 X-Loading 标记。

最后，在 Vue.js 中使用 Axios 发送 POST 请求时，可以在发送请求前显示加载动画，在接收响应时隐藏加载动画：

export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    async submitForm() {
      try {
        this.loading = true;
        await axiosInstance.post('/login', { username: 'test', password: 'test' });
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    }
  }
};

在 Vue.js 组件中，可以定义一个 loading 变量来控制加载动画的显示和隐藏。在调用 Axios 的 post 方法时，可以先将 loading 变量设置为 true，表示正在加载中。在接收响应时，再将 loading 变量设置为 false，表示加载完成。如果发生错误，也需要将 loading 变量设置为 false。

在模板中可以使用 loading 变量来控制加载动画的显示和隐藏：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="Username">
      <input type="password" v-model="password" placeholder="Password">
      <button type="submit">Submit</button>
    </form>
    <div v-if="loading">Loading...</div>
  </div>
</template>