Axios详细介绍
- 安装
- 基本使用
- 发送 POST 请求
- 使用请求配置
- 拦截器
- 取消请求
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。它提供了简单易用的 API,可以在浏览器和 Node.js 环境中发送 HTTP 请求,并处理响应。Axios 支持请求和响应的拦截器、自动转换 JSON 数据、取消请求、客户端支持保护免受 XSRF 攻击等功能。
安装
在 Node.js 环境中,你可以使用 npm 或 yarn 来安装 Axios:
npm install axios
# 或者
yarn add axios
在浏览器中,你可以通过 CDN 引入 Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
基本使用
以下是一个使用 Axios 发送 GET 请求的示例:
// 引入 Axios
const axios = require('axios');// 发送 GET 请求到指定的 URL
axios.get('https://api.example.com/data').then(response => {// 请求成功时,response 对象包含服务器返回的数据console.log(response.data);}).catch(error => {// 请求失败时,error 对象包含错误信息console.error('Error fetching data:', error);});
发送 POST 请求
以下是一个使用 Axios 发送 POST 请求的示例,同时发送一些数据到服务器:
// 引入 Axios
const axios = require('axios');// 定义要发送的数据
const postData = {key1: 'value1',key2: 'value2'
};// 发送 POST 请求到指定的 URL,并携带数据
axios.post('https://api.example.com/submit', postData).then(response => {// 请求成功时,处理服务器返回的数据console.log('Data submitted successfully:', response.data);}).catch(error => {// 请求失败时,处理错误信息console.error('Error submitting data:', error);});
使用请求配置
你可以通过配置对象来定制请求,例如设置请求头、查询参数等:
// 引入 Axios
const axios = require('axios');// 定义请求配置
const config = {method: 'get', // 请求方法url: 'https://api.example.com/search', // 请求 URLparams: { // 查询参数q: 'search query'},headers: { // 请求头'Authorization': 'Bearer YOUR_ACCESS_TOKEN'}
};// 发送请求
axios(config).then(response => {// 请求成功时,处理服务器返回的数据console.log('Search results:', response.data);}).catch(error => {// 请求失败时,处理错误信息console.error('Error fetching search results:', error);});
拦截器
拦截器允许你在请求或响应被处理之前拦截它们。你可以添加请求拦截器来在发送请求之前做一些事情,比如添加认证令牌。你也可以添加响应拦截器来处理响应数据或错误。
// 引入 Axios
const axios = require('axios');// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么,比如添加认证令牌const token = 'YOUR_ACCESS_TOKEN';if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做些什么return response;
}, error => {// 对响应错误做些什么,比如统一处理错误格式if (error.response.status === 401) {// 处理未授权错误console.error('Unauthorized, redirecting to login');}return Promise.reject(error);
});// 发送请求
axios.get('https://api.example.com/protected').then(response => {console.log('Protected data:', response.data);}).catch(error => {console.error('Error fetching protected data:', error);});
取消请求
你可以使用 CancelToken 来取消请求:
// 引入 Axios 和 CancelToken
const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;// 发送请求,并设置取消令牌
axios.get('https://api.example.com/long-request', {cancelToken: new CancelToken(function executor(c) {// 保存取消函数cancel = c;})
})
.then(response => {console.log('Data received:', response.data);
})
.catch(thrown => {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求(消息参数是可选的)
cancel('Operation canceled by the user.');
以上就是对 Axios 的详细介绍和一些具体的使用样例。通过这些示例,你可以看到 Axios 是如何简化 HTTP 请求的发送和处理的。