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：

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

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

发送GET和POST请求

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

javascript">// 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 发起请求时,以下是创建请求时可用的一些配置选项：

url：用于请求的服务器 URL。这是必需的，其他配置项都是可选的。例如：
```
javascript">axios({url: '/user',method: 'get',// 其他配置项...
});
```
method：请求使用的 HTTP 方法。如果未指定，默认为 GET 方法。
baseURL：将自动添加到 url 前面的基本 URL。这对于为 Axios 实例的所有请求提供相对 URL 很有用。例如：
```
javascript">axios.defaults.baseURL = 'https://api.example.com';
```
transformRequest 和 transformResponse：允许在发送请求前和处理响应前对数据进行转换。例如，您可以修改请求数据或响应数据的格式。

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

javascript">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允许你使用拦截器来修改请求或响应：

javascript">// 添加请求拦截器
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);});