Axios的简明教程

Axios是什么？

Axios是一个基于promise的HTTP客户端，可以在浏览器和node.js中使用。它提供了一种简单的方法来发送异步HTTP请求。与其他HTTP库（如Fetch）相比，Axios提供了更丰富的功能和更好的错误处理。例如，Axios支持取消请求，自动转换JSON数据，客户端支持防止CSRF，等等。

安装Axios

你可以使用npm或yarn来安装Axios：

npm install axios

或者

yarn add axios

创建Axios实例

创建Axios实例可以让你自定义配置，比如设置基础URL：

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

这样，你就可以在所有的请求中复用这个配置了。

发送GET和POST请求

使用Axios发送GET和POST请求非常简单：

// GET请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

// POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

在这里，我们首先发送一个GET请求，然后在promise的then方法中处理响应。如果请求失败，我们可以在catch方法中处理错误。

Axios的配置选项

当您使用 Axios 发起请求时,以下是创建请求时可用的一些配置选项：

1. url：用于请求的服务器 URL。这是必需的，其他配置项都是可选的。例如：

   axios({
     url: '/user',
     method: 'get',
     // 其他配置项...
   });
   

2. method：请求使用的 HTTP 方法。如果未指定，默认为 GET 方法。

3. baseURL：将自动添加到 url 前面的基本 URL。这对于为 Axios 实例的所有请求提供相对 URL 很有用。例如：

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

4. transformRequest 和 transformResponse：允许在发送请求前和处理响应前对数据进行转换。例如，您可以修改请求数据或响应数据的格式。

5. headers：自定义请求头。例如，您可以设置 X-Requested-With 头：

   axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
   

6. params：与请求一起发送的 URL 参数。必须是一个简单对象或 URLSearchParams 对象。

7. data：作为请求体发送的数据。仅适用于 PUT、POST、DELETE 和 PATCH 请求方法。

8. timeout：指定请求超时的毫秒数。如果请求时间超过指定的超时值，请求将被中断。

9. withCredentials：表示跨域请求时是否需要使用凭证。

10. responseType：表示浏览器将要响应的数据类型，例如 JSON、文本等。

11. maxRedirects：定义在 Node.js 中要遵循的最大重定向数。

12. validateStatus：定义对于给定的 HTTP 状态码是 resolve 还是 reject promise。

Axios的拦截器

Axios允许你使用拦截器来修改请求或响应：

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

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

拦截器是一种强大的工具，可以让你在请求发送或响应到达之前执行代码。例如，你可以在请求拦截器中添加认证头，或者在响应拦截器中全局处理错误。