2022-02-08 axios笔记(四) axios.create()创建axios实例,设置拦截器,axios取消请求

0.回顾:创建POST请求(函数写法和对象写法)

function testPost() {
   
    /*方式一:axios.post()*/
    // axios.post("http://localhost:3000/posts", {
   
    //         id: 3,
    //         body: "post body3",
    //         postId: 3
    //     })
    //     .then(res => {
   
    //         console.log("我是posts接口中的数据:", res.data);
    //     })
    //     .catch(res => {
   
    //         console.log("我是失败的数据:", res);
    //     });
    /*方式二:axios()*/
    axios({
   
        method: "POST",
        url: "http://localhost:3000/posts",
        data: {
   
            id: 3,
            body: "post body3",
            postId: 3
        }
    }).then(response => {
   
        console.log("post请求的获取数据:", response.data);
    });
}

1.使用axios.create(config)创建axios实例

主要用途:在项目中,对axios的二次封装(面试必问)

为什么叫二次封装?
因为axios({})请求函数本身就是一个基于promise的、对xhr对象的封装函数

语法和结构

const instance=axios.create({
   
  // 请求的默认全局配置写在这
  baseUrl:"xxx",//等价于不创建axios实例时,axios.defaults.baseURL='xxx'
  timeout:xxx
});
// 创建好的axios实例--instance,可以直接传参发起请求
instance({
   
  url:"/",
  methods:"GET/POST/...",
  ...
}).then(()=>{
   });

示例:向端口3000发送get请求，要向端口4000发送post请求

const instance1 = axios.create