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({
  baseURL: 'http://localhost:3000'
})

// 使用instance发送请求
instance1({
  url: '/posts'
})

const instance2 = axios.create({
  baseURL: 'http://localhost:4000'
})

// 使用instance发送请求
instance2({
  url: '/posts',
  method: 'POST'
})

2.设置拦截器

拦截器(interceptors)的本质是回调函数

拦截器的分类有:请求拦截器和响应拦截器

请求拦截器：可以在发请求之前可以处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

如何设置请求拦截器和响应拦截器?

示例:拦截器的执行顺序(接上例)

axios.defaults.baseURL = "http://localhost:3000";
var getbtn = document.querySelector(".getbtn");
getbtn.addEventListener("click", function() {
   axios.get("/posts/1")
       .then(res => {
           console.log(res.data);
       })
});
/******设置响应拦截器和请求拦截器*******/
// 添加请求拦截器
axios.interceptors.request.use(config => {
   console.log("我是请求拦截器1");
   return config;
}, error => {
   return Promise.reject(error);
});
axios.interceptors.request.use(config => {
   console.log("我是请求拦截器2");
   return config;
}, error => {
   return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
   console.log("我是响应拦截器1");
   return response;
}, error => {
   return Promise.reject(error);
});
axios.interceptors.response.use(response => {
    console.log("我是响应拦截器2");
    return response;
}, error => {
    return Promise.reject(error);
});

输出

点击getbtn,发送一个get请求,输出:

我是请求拦截器2
我是请求拦截器1
我是响应拦截器1
我是响应拦截器2
{title: 'czh...', author: 'czh...', id: 1}

可以看到输出顺序依次是:
请求拦截器2>请求拦截器1>响应拦截器1>响应拦截器2>get请求到的数据

分析

• 请求拦截器是发起请求之前拦截,特点:后添加先执行
• 响应拦截器是在发起请求后,获取请求回调之前拦截,特点:先添加先执行

3.axios取消请求

准备:用express搭建并开启一个服务器

server.js:设置端口为3000和配置一个product路由,并允许跨域

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())  // 使用cors，允许跨域
app.use(express.json())   // 解析Content-Type为 application/json格式的请求体
// 配置路由product
app.get('/product', (req, res) => {
  setTimeout(() => {
    res.send([
      {
        id: 1,
        name: 'product1'
      }
    ])
  }, 2000)
})
// 设置监听
app.listen(3000, () => {
    console.log("server connect:http://localhost:3000...");
})

开启服务器:nodemon server.js

取消请求的步骤

• 定义一个变量cancel，用于保存取消请求的函数
• 在设置axios的请求路径、请求方法的同时,设置属性cancelToken

cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
  cancel = c // 保存取消请求函数，用于之后取消请求
})

cancelToken的值是一个CancelToken对象
CancelToken类的构造函数的参数(上面所示的c),是用于请求的函数

• 调用取消请求的函数
• 在test.html中点击发送一个get请求,并在2000ms内取消请求

<button onclick="getProduct()">获取商品列表</button><br>
<button onclick="cancelReq()">取消请求</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.defaults
  let cancel // 用于保存取消请求的函数
  const getProduct= () => {
  	console.log("hello");
    axios({
      url: 'http://localhost:3000/products1',
      cancelToken: new axios.CancelToken((c) => { // c是用于取消当前请求的函数
        cancel = c // 保存取消请求函数，用于之后取消请求
      })
    }).then(response => {
      cancel = null // 请求结束后保存的取消请求的函数不再需要保存
      console.log('请求1成功: ', response.data)
    }, error => {
      cancel = null //因为不管成功还是失败,这个函数后续都没有存在的必要了...
      console.log('请求1失败: ', error.message, error)
    })
  }
  const cancelReq = () => {//执行取消请求的函数
    if (typeof cancel === 'function') {//判断cancel是否是一个函数
      cancel('强制取消请求1');//在此处调用了cancel()函数
    } else {
      console.log('没有可以取消的请求')
    }
  }
</script>

结果:(2s内取消请求和超过2s才点击"取消请求")