Axios的简明教程

Axios是什么？

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

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

1. npm install axios

复制代码

大概

1. yarn add axios

复制代码

创建Axios实例

创建Axios实例可以让你自界说设置，好比设置底子URL：

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

复制代码

如许，你就可以在全部的哀求中复用这个设置了。
发送GET和POST哀求

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

1. // GET请求
2. axios.get('/user?ID=12345')
3.   .then(function (response) {
4.     // 处理响应数据
5.   })
6.   .catch(function (error) {
7.     // 处理错误
8.   });
10. // POST请求
11. axios.post('/user', {
12.     firstName: 'Fred',
13.     lastName: 'Flintstone'
14.   })
15.   .then(function (response) {
16.     // 处理响应数据
17.   })
18.   .catch(function (error) {
19.     // 处理错误
20.   });

复制代码

在这里，我们起首发送一个GET哀求，然后在promise的then方法中处置惩罚相应。如果哀求失败，我们可以在catch方法中处置惩罚错误。
Axios的设置选项

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

• url：用于哀求的服务器 URL。这是必须的，其他设置项都是可选的。比方：
  1. axios({
  2.   url: '/user',
  3.   method: 'get',
  4.   // 其他配置项...
  5. });

  复制代码
• method：哀求使用的 HTTP 方法。如果未指定，默以为 GET 方法。
  
• baseURL：将自动添加到 url 前面的根本 URL。这对于为 Axios 实例的全部哀求提供相对 URL 很有用。比方：
  1. axios.defaults.baseURL = 'https://api.example.com';

  复制代码
• transformRequest 和 transformResponse：允许在发送哀求前和处置惩罚相应前对数据举行转换。比方，您可以修改哀求数据或相应数据的格式。
  
• headers：自界说哀求头。比方，您可以设置 X-Requested-With 头：
  1. axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  复制代码
• params：与哀求一起发送的 URL 参数。必须是一个简单对象或 URLSearchParams 对象。
  
• data：作为哀求体发送的数据。仅实用于 PUT、POST、DELETE 和 PATCH 哀求方法。
  
• timeout：指定哀求超时的毫秒数。如果哀求时间凌驾指定的超时值，哀求将被停止。
  
• withCredentials：体现跨域哀求时是否须要使用凭据。
  
• responseType：体现欣赏器将要相应的数据范例，比方 JSON、文本等。
  
• maxRedirects：界说在 Node.js 中要依照的最大重定向数。
  
• validateStatus：界说对于给定的 HTTP 状态码是 resolve 还是 reject promise。
  

Axios的拦截器

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

1. // 添加请求拦截器
2. axios.interceptors.request.use(function (config) {
3.     // 在发送请求之前做些什么
4.     return config;
5.   }, function (error) {
6.     // 对请求错误做些什么
7.     return Promise.reject(error);
8.   });
10. // 添加响应拦截器
11. axios.interceptors.response.use(function (response) {
12.     // 对响应数据做点什么
13.     return response;
14.   }, function (error) {
15.     // 对响应错误做点什么
16.     return Promise.reject(error);
17.   });

复制代码

拦截器是一种强盛的工具，可以让你在哀求发送或相应到达之前实验代码。比方，你可以在哀求拦截器中添加认证头，大概在相应拦截器中全局处置惩罚错误。