关于axios的create、拦截器

正好学习到记录下来

create

可以创建一个axios实例 对这个实例进行自定义配置

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

拦截器

拦截器的作用：在请求或响应被 then 或 catch 处理前拦截它们

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果想移除，可以这样

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

也可以为自定义axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

demo

获取笑话接口地址：autumnfish.cn/api/joke/li…

let interface = axios.create({
    baseURL: "https://autumnfish.cn/api/joke"
})

// 添加请求拦截器
interface.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //config所有请求的相关信息
    window.console.log("拦截的数据", config)
    config.url = "/list?num=100"
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
interface.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // response所有返回的相关信息
    window.console.log("响应的数据拦截", response)
    response.data.jokes = response.data.jokes.slice(0, 1)
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});


// // interface相当于就是一个定义了一些默认属性的axios
// interface({
//     url: "/list?num=10"
// }).then(res => {
//     window.console.log(res)
// })