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 发起请求时,以下是创建请求时可用的一些配置选项:
url
:用于请求的服务器 URL。这是必需的,其他配置项都是可选的。例如:axios({ url: '/user', method: 'get', // 其他配置项... });
method
:请求使用的 HTTP 方法。如果未指定,默认为 GET 方法。baseURL
:将自动添加到url
前面的基本 URL。这对于为 Axios 实例的所有请求提供相对 URL 很有用。例如:axios.defaults.baseURL = 'https://api.example.com';
transformRequest
和transformResponse
:允许在发送请求前和处理响应前对数据进行转换。例如,您可以修改请求数据或响应数据的格式。headers
:自定义请求头。例如,您可以设置X-Requested-With
头: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允许你使用拦截器来修改请求或响应:
// 添加请求拦截器
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);
});
拦截器是一种强大的工具,可以让你在请求发送或响应到达之前执行代码。例如,你可以在请求拦截器中添加认证头,或者在响应拦截器中全局处理错误。