为什么要创建axios实例

为什么要创建axios实例

1.怎么创建Axios实例

// utils/request.js
import axios from 'axios'

const instance = axios.create({
     baseUrl: '',
    // ...
})
// 实例上添加拦截器
instance.interceptors.request.use((req) => {})
instance.interceptors.response.use(res => {})
export default instance

// 调用
// src/app.vue
import $axios from './utils/request.js'
// 不需要在此添加 http://xxx, 因为已经统一管理
$axios.get('/xxx/yyy').then(res => {})

创建实例可以统一管理全局参数，比如baseUrl等

同时配置在同一个文件内，后面如果要更换其他的请求库或者新增其它参数，那么很容易维护

2.直接使用axios

import axios from 'axios'
// 添加拦截器
axios.interceptors.response.use(res => res)
// 直接使用,每一个都要写上 http://xxx
axios.get('http://xxx').then(res => {})
axios.post('http://xxx').then(res => {})

直接引入 axios 随引随用

缺点：每个调用都需要写域名前缀，更换时不方便管理

增加的拦截器是全局的，如果存在多个域名，处理情况不一致时，不需要拦截器依旧会被调用

总结

实例创建可以拿到一个纯净的axios实例，不必担心会被污染

同时可以在一个地方统一管理

存在多个axios实例时更容易管理

没有实例的axios在使用拦截器时会污染到其它实例

直接使用时每次调用都要填写域名前缀信息