60 Axios 二次封装

60 Axios 二次封装

安装

在 Vue 项目中使用 axios ，需要使用 npm 下载

$ npm install axios

或者使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

创建实例

可以使用自定义配置新建一个 axios 实例

const instance = axios.create({
    
    // baseURL 将自动调添加在 url 前面，除非 url 是一个绝对 URL
    baseURL: 'https://some-domain.com/api',
    
    // timeout 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求花费了超过 timeout 的时间，请求将被中断
    timeout: 1000,
    
    // headers 是即将被发送的自定义请求头
    headers: {'X-Custom-Header': 'footbar'},
    
    // withCredentials 表示跨域请求时是否需要凭证
    // 默认值为 false
    withCredentials: false,
})

更多自定义配置详情

拦截器

在请求或响应被 then 或 catch 处理前拦截它们

添加请求拦截器

instance.interceptors.request.use(config => {
    /*
    * 在发送之前做些什么(可以是 loading 加载)
    */
    return config
  
    // 错误时报错
}, error => {
    // 对请求错误做点什么
    return Promise.reject(error)
})

添加响应拦截器

instance.interceptors.response.use(res => {
    /*
    * 对响应数据做些什么(可以是关闭 loading 加载)
    */
    return res
    
    // 错误时报错
}, error => {
    // 对请求错误做点什么
    return Promise.reject(error)
})

导出

需要给其他模块使用时，需要需要将当前模块的实例对象导出

export default instace

其他模块需要使用时使用 import 和 from 引用