vue-axios 默认配置的实践

默认值的优先顺序

---

全局默认值：这代表，所有的实例都会使用该默认值。 

// 基础请求路径。非生产环境 && 开启代理, 接口前缀统一使用[/api]前缀做代理拦截!
axios.defaults.baseURL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_SERVER_URL;
// 超时时间
axios.defaults.timeout = 100000
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
// axios.defaults.headers = {'Content-Type': 'application/json; charset=utf-8'}
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'

自定义实例默认值：这代表，该配置是属于该实例的特殊配置。 

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

优先顺序

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。

配置项

---

axios.defaults.baseURL

请求的基础路径，一般会根据开发或生产环境进行变化，通过条件表达式实现

axios.defaults.baseURL = process.env.VUE_API_BASE_URL;

axios.defaults.timeout

超时时间，可以设置一个较短的容忍时间，防止长时间没有相应，降低用户体验感。

但也有特殊情况，如之前做过的一个项目，需要将数据上传+解析，然后再返回结果，整个过程可能有 10+ 秒，如果设置较短的超时时间，也会给用户提示超时，造成出错的感觉，但实际上是服务器相应慢。

axios.defaults.withCredentials

开发环境下，存在跨域请求问题，如果还要携带 cookie 等信息，需要设置此项为 true。