6 axios实例对象、拦截器

1 实例对象

• create()函数里面传递的是配置实例；
• 创建的axios实例对象与直接使用axios基本一致；
• 优点是可以创建多个不同的axios实例实现不同的功能访问不同的服务器

            const myAxios = axios.create({
                baseURL: "http://localhost:3000",
                timeout: 3000
            })
            myAxios({
                method: 'GET',
                url: '/posts'
            }).then(resp => {
                console.log(resp)
            }).catch(err => {
                console.log(err)
            })

2 拦截器

就是一些函数；

2.1. 请求拦截器：

请求之前可以对请求进行拦截；
可以对config进行修改；
若有多个请求拦截器，执行顺序为先添加后执行

2.2. 响应拦截器

响应之前，处理结果之前可以对结果预处理；
若有多个响应拦截器，执行顺序为先添加先执行；
可以对返回的结果进行修改

            //请求拦截器
            axios.interceptors.request.use(config => {
                console.log("request success")
                return config;//这里如果不返回config，则会请求失败
            }, error => {
                console.log("request error")
                return Promise.reject(error);
            });

            //响应拦截器
            axios.interceptors.response.use(response => {
                console.log("response success")
                return response;//这里可以返回response.data直接返回数据
            }, error => {
                console.log("response error")
                return Promise.reject(error);
            });


            //get请求
            axios.get("http://localhost:3000/posts")
                .then(res => {
                    console.log(res)
                })
                .catch(err => {
                    console.error(err);
                })

image.png