Axios二次封装的详细教程

2023-11-17 07:34:37

正文

Axios是一个基于Promise的HTTP客户端，它可以在浏览器和Node.js中使用。Axios二次封装可以帮助我们更方便地使用Axios，并可以添加一些额外的功能，例如请求拦截器、响应拦截器和超时处理。

设置cancelFlag标志符

在Axios二次封装中，我们可以设置一个cancelFlag标志符来控制请求。cancelFlag默认为true，在请求拦截器时，判断如果cancelFlag为true，就可以发送请求，且将cancelFlag设为false。当cancelFlag为false,就取消请求。在响应拦截器中再将cancelFlag设为true。说明只用当cancelFlag为true时才会发送请求。

let cancelFlag = true;

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
});

axiosInstance.interceptors.request.use(config => {
  if (cancelFlag) {
    config.cancelToken = new axios.CancelToken(cancel => {
      cancelFlag = false;
    });
  }
  return config;
});

axiosInstance.interceptors.response.use(response => {
  cancelFlag = true;
  return response;
});

使用请求拦截器和响应拦截器

Axios二次封装还允许我们使用请求拦截器和响应拦截器来控制请求和响应。请求拦截器可以在请求发送之前进行一些处理，例如添加请求头、参数预处理等。响应拦截器可以在请求返回之后进行一些处理，例如数据格式转换、错误处理等。

axiosInstance.interceptors.request.use(config => {
  // 在这里可以做一些请求发送之前的处理，例如添加请求头、参数预处理等
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // 在这里可以做一些请求返回之后的处理，例如数据格式转换、错误处理等
  return response;
});

使用Axios进行HTTP请求

在Axios二次封装中，我们可以使用Axios来进行HTTP请求。Axios提供了多种方法来进行HTTP请求，包括get、post、put、delete等。

axiosInstance.get('/users').then(response => {
  console.log(response.data);
});

axiosInstance.post('/users', { name: 'John Doe' }).then(response => {
  console.log(response.data);
});

axiosInstance.put('/users/1', { name: 'Jane Doe' }).then(response => {
  console.log(response.data);
});

axiosInstance.delete('/users/1').then(response => {
  console.log(response.data);
});