（三）在vue2和vue3项目中全局配置axios以及拦截器的相关作用

目录

一，vue3项目中全局配置axios

二，vue2项目中全局配置axios

 三，请求拦截器

1.请求拦截器的设置

2.请求拦截器-----实现Token认证

 3.实现Loading效果

 四，响应拦截器

1.响应拦截器的设置

 2.关闭Loading效果

---

vue3和vue2中全局配置大致相同，仅仅第3步不同。

一，vue3项目中全局配置axios

import {createApp} from 'vue'
import App from './App.vue'

import axios from 'axios'
//1.导入axios

const app = createAPP(App)

//2.配置请求根路径
axios.defaults.baseURL = '.........'

//3.全局配置axios
app.config.globalProperties.$http = axios 

app.mount('#app')

二，vue2项目中全局配置axios

import Vue from 'vue'
import App from './App.vue'

//1.导入axios
import axios from 'axios'

//2.配置请求根路径
axios.defaults.baseURL = ' .......... '

//3.通过vue构造函数的原型对象，全局配置axios
vue.prototype.$http =  axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 三，请求拦截器 1.请求拦截器的设置

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2.请求拦截器-----实现Token认证

关键在于给config设置Token认证字段

 3.实现Loading效果

 四，响应拦截器 1.响应拦截器的设置

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

 2.关闭Loading效果