axios详解
Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以在浏览器中发送异步请求,也可以在Node.js中发送HTTP请求。Axios具有以下特点:
- 支持Promise API
- 支持拦截请求和响应
- 支持取消请求
- 自动转换JSON数据
- 支持客户端防XSRF
安装
在使用Axios之前,我们需要先安装它。可以使用npm或yarn进行安装:
npm install axios
或者
yarn add axios
发送请求
使用Axios发送请求非常简单。以下是使用Axios发送GET请求的示例:
import axios from 'axios';
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
在上面的代码中,我们首先导入Axios模块。然后,我们使用axios.get()
方法发送一个GET请求,该请求将请求URL设置为/api/users
。在请求成功时,我们使用response.data
访问应数据。在请求失败时,我们使用error
访问错误信息。
以下是一个使用Axios发送POST请求的示例:
import axios from 'axios';
axios.post('/api/users', {
firstName: 'John',
lastName: 'Doe'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
在上面的代码中,我们使用axios.post()
方法发送一个POST请求,该请求将请求URL设置为/api/users
。我们还将一个包含firstName
和lastName
属性的对象作为请求体发送。在请求成功时,我们使用response.data
访问响应数据。在请求失败时我们使用error
访问错误信息。
拦截请求和响应
Axios允许我们拦截请求和响应,并在它们被发送或接收之前对它们修改。以下是一个拦截请求的示例:
import axios from 'axios';
axios.interceptors.request.use(config => {
// 在请求发送之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
在上面的代码中,我们使用axios.interceptors.request.use()
方法拦截请求,并在请求发送之前对请求进行修改。我们可以在config
对象上添加或修改请求头、请求参数等。如果请求失败,我们可以使用Promise.reject()
方法将错误传递给下一个拦截器或请求。
以下是一个拦截响应的示例:
import axios from 'axios';
axios.interceptors.response.use(response => {
// 对响应数据做些什么
return response;
}, error => {
// 对响应错误做些什么
return Promise.reject(error);
});
在上面的代码中,我们使用axios.interceptors.response.use()
方法拦截响应,并在响应被接收之前对响应进行修改。我们可以在response
对象上添加或修改响应头、响应数据等。如果响应失败,我们可以使用Promise.reject()
方法将错误传递给下一个拦截器或请求。
取消请求
Axios允许我们取消请求。以下是一个取消请求的示例:
import axios from 'axios';
const source = axios.CancelToken.source();
axios.get('/api/users', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求已取消:', error.message);
} else {
console.log(error);
}
});
// 取消请求
source.cancel('用户取消了请求');
在上面的代码中,我们首先创建了一个CancelToken
对象source
。然,我们使用source.token
将CancelToken
对象传递给请求配置中的cancelToken
属性。在请求成功时,我们使用response.data
访问响应数据。在请求失败时,我们使用axios.isCancel()
检查错误是否是由取消请求引起的。如果是,我们将输出一个取消请求的消息。最后,我们使用source.cancel()
方法取消请求,并将取消请求的原因传递给它。
自动转换JSON数据
Axios可以自动将JSON数据转换为JavaScript对象。以下是一个自动转换JSON数据的示例:
import axios from 'axios';
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
在上面的代码中,我们使用axios.get()
方法发送一个GET请求,并在请求成功时使用response.data
访问响应数据。Axios将自动将JSON数据转换为JavaScript对象。
客户端防御XSRF
Axios可以帮助我们防御XSRF攻击。以下是一个防御XSRF攻击的示例:
import axios from 'axios';
const instance = axios.create({
xsrfCookieName: 'mytoken',
xsrfHeaderName: 'X-CSRF-TOKEN'
});
instance.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
在上面的代码中,我们首先使用axios.create()
方法创建一个Axios实例。然后,我们使用xsrfCookieName
和xsrfHeaderName
属性指定XSRF令牌的cookie名称和请求头名称。在发送请求时,Axios将自动从cookie中获取XSRF令牌,并将其添加到请求头中。
结论
在本文中,我们详细讲解了Axios的使用方法。我们提供了多个示例,演示了如何发送GET和POST请求,如何拦截请求和响应,如何取消请求,如何自动转换JSON数据,以及如何防御XSRF攻击。Axios是一个功能强大的HTTP客户端,可以帮助我们轻松地发送HTTP请求并处理响应。