axios实例对象使用 与 拦截器

import axios from 'axios'
// 导出request方法
export function request(config, success, failure){
    //1,创建axios实例
    // 为什么要实现axios的实例来创建请求,而不是使用全局的axios
    // 因为可能一个项目可以有多个域的请求,那么一个全局的axios就无法满足要求了
    // 根据不用的模块创建不同的axios实例
    const instance = axios.create({
        // 请求时会拼接baseurl
        baseURL: 'http://www.mg.com',
        // 超时毫秒数
        timeout: 1000
    })

    // 2,axios的拦截器
    // 2.1,请求拦截的作用
    instance.interceptors.request.use(config => {
        console.log(config)
        // 1.比如config中的一些信息不符合服务器的要求

        // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标

        // 3.某些网络请求,必须携带一些特殊的信息

        // 放行
        return config
    }, err => {
        // 一般网络异常之类的错误才会进入这里
        console.log(err)
    })
    // 2.2,响应拦截
    instance.interceptors.response.use(res => {
        console.log('响应成功',res)

        // 放行
        return res.data
    }, err => {
        // 返回响应状态码错误时进入
        console.log('响应失败',err)
    }) 
    // 发送真正的网络请求-返回promise
    return instance(config)
}

 调用:

request({
            url:'/swiper'
        }).then(res => {
            console.log('res',res)
        }).catch(err => {
            console.log('err',err)
        })

 

posted @ 2020-03-13 23:03  cl94  阅读(637)  评论(0编辑  收藏  举报