Ajax常用封装库——Axios的使用

Axios是一个基于Promise的HTTP请求库，可以用于浏览器和Node.js，支持拦截器、取消请求、并发请求等功能。在前端开发中，Axios是一个非常常用的封装库。本文将详细介绍Axios的使用。

安装Axios

安装Axios很简单，可以直接使用npm安装，命令如下：

npm install axios --save

使用Axios

使用Axios发送HTTP请求非常简单，以下是基本的使用方式：

import axios from 'axios';

// 发送 GET 请求
axios.get('/api/getData')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送 POST 请求
axios.post('/api/setData', {
    name: 'Tom',
    age: 20
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios的基本配置

Axios提供了一些可配置的选项，可以根据自己的需求进行设置。以下是一些常用的选项：

baseURL

可以设置请求的基本URL，即将所有请求的URL的开头添加上基本URL。

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';

axios.get('/api/getData')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面代码中，所有请求的URL的开头都会自动加上https://api.example.com。

timeout

可以设置请求的超时时间，单位为毫秒。

import axios from 'axios';

axios.defaults.timeout = 5000;

axios.get('/api/getData')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面代码中，设置了请求的超时时间为5秒。

Axios的拦截器

Axios提供了拦截器，可以在发送请求和接收响应前对它们进行拦截和处理，非常方便。以下是拦截器的基本用法：

请求拦截器

import axios from 'axios';

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

axios.get('/api/getData')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

响应拦截器

import axios from 'axios';

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

axios.get('/api/getData')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios并发请求

Axios可以同时发送多个请求，并且一起处理它们的响应结果。以下是一个简单的示例：

import axios from 'axios';

axios.all([
  axios.get('/api/getData'),
  axios.post('/api/setData', {
    name: 'Tom',
    age: 20
  })
]).then(axios.spread(function (getDataResponse, setDataResponse) {
  // 处理响应结果
  console.log(getDataResponse);
  console.log(setDataResponse);
})).catch(function (error) {
  console.log(error);
});

以上是Axios的基本使用方法和常用配置，拦截器和并发请求等高级用法也非常实用。希望以上内容能够帮助你更好地理解和使用Axios。