Axios的作用用法介绍(axios的作用及其使用方法)

一、发起HTTP请求

Axios是一个基于promise的HTTP库，可以发送跨域请求、取消请求、自动转换数据格式等。使用Axios时，只需要用一个简单直观的方法发起请求。Axios的请求方法支持Promise API，因此可以方便地进行异步操作。

axios({
  method: 'get',
  url: 'https://api.example.com/users',
  params: {
    ID: 12345
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

以上代码是一个简单HTTP GET请求的示例。使用Axios发送请求时，我们只需要传入一个包含请求方法、url和请求参数的配置对象。Axios会自动将JavaScript对象转换成JSON格式，并发送到服务器。

二、请求、响应拦截器

Axios提供请求和响应拦截器，可以在请求和响应发送的过程中拦截和处理数据，方便我们做统一的处理。

1. 请求拦截器

请求拦截器可以在请求发送之前对请求进行统一的处理。比如添加通用请求头、参数加密等操作。以下是一个添加通用请求头的示例。

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'token';
  return config;
});

2. 响应拦截器

响应拦截器可以在请求返回之后对响应进行统一的处理。比如自动判断响应状态、解密数据等操作。以下是一个自动判断响应状态的示例。

axios.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data;
  } else {
    return Promise.reject(response.data);
  }
}, error => {
  return Promise.reject(error);
});

三、取消请求

在实际项目中，我们常常需要取消一些不必要或已过期的请求，防止资源的浪费。Axios提供了取消请求的方法，可以方便地取消多个请求。

1. 取消单个请求

以下是一个取消单个请求的示例。使用Axios发送请求时，会返回一个包含cancel函数的cancelToken对象。我们可以在需要取消请求时调用cancel函数。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

cancel();

2. 取消多个请求

当我们需要取消多个请求时，可以将多个cancelToken对象添加到数组中，并在需要取消时遍历一遍数组调用cancel函数。以下是一个取消多个请求的示例。

const CancelToken = axios.CancelToken;
let cancelArr = [];

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancelArr.push(c);
  })
});

axios.get('/user/23456', {
  cancelToken: new CancelToken(function executor(c) {
    cancelArr.push(c);
  })
});

for(let i = 0; i < cancelArr.length; i++) {
  cancelArr[i]();
}

四、自动转换数据格式

Axios可以自动将JavaScript对象转换成JSON格式，并发送到服务器，服务器将返回的数据也会自动转换成JavaScript对象。我们不需要手动进行数据格式的转换操作。

const data = {
  name: 'Tom',
  age: 18
};

axios.post('/user', data)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

以上代码发送了一个POST请求，并附带了一个JavaScript对象。Axios会自动将JavaScript对象转换成JSON格式，并发送到服务器。服务器返回的数据也会自动转换成JavaScript对象。