axios的踩坑记录

问题起因

在做后台系统的时候，有3个特殊的接口不能走全局的axios，所以需要新建一个axios对象，但是因为新建的axios对象没有设置全局请求拦截、响应拦截，导致返回的数据是如下所示：

{
    config: {transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: 'XSRF-TOKEN', adapter: ƒ, …}
    data: {success: true, message: '操作成功！', code: 0, result: '1524963338696536065', timestamp: 1652414567051}
    headers: {access-control-allow-credentials: 'true', access-control-allow-methods: 'GET,POST,OPTIONS,PUT,DELETE', access-control-allow-origin: 'http://localhost:8087', connection: 'close', content-encoding: 'gzip', …}
    request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
    status: 200
    statusText: "OK"
 }

而真正的返回数据，其实是在data中

通常情况下的asiox请求流程

import axios from 'axios'

let apiBaseUrl = '/zeen-safe/';

const service = axios.create({
    //baseURL: '/jeecg-boot',
 
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

    baseURL: apiBaseUrl, // api base_url
    timeout: 30000 // 请求超时时间
})

// 请求拦截
// request interceptor
service.interceptors.request.use(config => {
    // some code...
}, (error) => {
    return Promise.reject(error)
})


// 响应拦截
// response interceptor
service.interceptors.response.use((response) => {
  return response.config.url.includes('/ffmpeg/cut') ? response: response.data
}, err)


export {
    installer as VueAxios,
    service as axios
    // 将service导出为axios （也就是说，在需要用到的js文件中，import { axios } from '' 即可 ）
    
}

配置默认项

全局的axios默认值

axios.defaults.baseURL = 'https://api.example.com'; 
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

自定义实例默认值

// 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 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置的默认值来创建实例 
// 此时超时配置的默认值是 `0` 
var instance = axios.create();  

// 覆写库的超时默认值 // 现在，在超时前，所有请求都会等待 2.5 秒 
instance.defaults.timeout = 2500; 

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {   timeout: 5000 });

个人博客地址 欢迎访问