vue3集成axios，添加拦截器

淡淡的烟草味﹌ 2022-11-06 04:57 176阅读 0赞

[文档>>][Link 1]

npm install axios --save

在main.ts中引入

import { createApp } from 'vue'
    import axios from 'axios' // 1、引入
    import router from './router'
    import store from './store'
    
    import App from './App.vue'
    axios.defaults.baseURL = 'http://localhost:7001/api/' // 2、配置基础API
    axios.interceptors.request.use(config => { // 3、添加拦截器
      store.commit('setLoading', true)
      store.commit('setError', { status: false, message: '' })
      return config
    })
    
    axios.interceptors.response.use(config => { // 4、添加拦截器
      setTimeout(() => {
        store.commit('setLoading', false)
      }, 1000)
      return config
    }, e => {
      const { error } = e.response.data
      store.commit('setError', { status: true, message: error })
      store.commit('setLoading', false)
      return Promise.reject(e.response.data)
    })
    const app = createApp(App)
    app.use(router)
    app.use(store)
    app.mount('#app')

官方配置Interceptors拦截器示例

// Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
      });
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
        return response;
      }, function (error) {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response error
        return Promise.reject(error);
      });

[Link 1]: https://github.com/axios/axios#global-axios-defaults