Axios 是一个基于 Promise 的 JavaScript 库，用于发送 HTTP 请求（如 GET、POST、PUT、DELETE 等），可以在浏览器和 Node.js 环境中使用。它简化了与服务器之间的通信，并提供了一些额外的功能，如请求和响应拦截器、请求取消、自动转换 JSON 数据等。
主要特性
- 支持 Promise：
Axios使用 Promise 进行异步操作，使得处理 HTTP 请求更加简洁。 - 浏览器和 Node.js 都能使用：你可以在前端（浏览器）和后端（Node.js）环境中使用
Axios。 - 请求和响应拦截器：你可以在请求发送前或响应返回后进行处理，例如添加请求头、处理错误等。
- 自动转换 JSON 数据：
Axios会自动将 JSON 响应体解析为 JavaScript 对象，简化了处理过程。 - 取消请求：你可以取消已经发出的请求。
- 支持并发请求：可以使用
axios.all和axios.spread进行多个请求并发。
安装 Axios
在前端项目中，你可以使用 npm 或 yarn 安装 Axios：
bashCopy Code
npm install axios
# 或者
yarn add axios
如果你在 HTML 页面中直接引入 Axios，也可以通过 CDN：
htmlCopy Code
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用 Axios
1. 发起 GET 请求
javascriptCopy Code
// 引入 axios
import axios from 'axios';
// 发起 GET 请求
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data); // 输出服务器返回的数据
})
.catch(error => {
console.error('请求失败', error);
});
2. 发起 POST 请求
javascriptCopy Code
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data); // 输出服务器返回的数据
})
.catch(error => {
console.error('请求失败', error);
});
3. 添加请求头
javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts', {
headers: {
'Authorization': 'Bearer your_token_here'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求失败', error);
});
4. 使用 async/await
javascriptCopy Code
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
console.log(response.data); // 输出服务器返回的数据
} catch (error) {
console.error('请求失败', error);
}
}
fetchData();
5. 并发请求
如果你需要同时发起多个请求并在全部请求完成后处理结果，可以使用 axios.all：
javascriptCopy Code
axios.all([
axios.get('https://jsonplaceholder.typicode.com/posts'),
axios.get('https://jsonplaceholder.typicode.com/users')
])
.then(axios.spread((posts, users) => {
console.log(posts.data); // 输出 posts 请求的结果
console.log(users.data); // 输出 users 请求的结果
}))
.catch(error => {
console.error('请求失败', error);
});
配置 Axios
你还可以为 Axios 设置默认配置，比如设置请求超时、全局的请求头等：
javascriptCopy Code
// 设置默认的请求配置
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 10000; // 设置请求超时时间（10秒）
axios.defaults.headers.common['Authorization'] = 'Bearer your_token_here';
// 发起请求时会自动使用这些配置
axios.get('/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求失败', error);
});
请求拦截器与响应拦截器
你可以在请求发送前或响应返回后执行一些操作，如添加认证信息、处理错误等。
请求拦截器
javascriptCopy Code
axios.interceptors.request.use(config => {
// 在请求发送之前处理配置，比如添加 token
config.headers['Authorization'] = 'Bearer your_token_here';
return config;
}, error => {
return Promise.reject(error);
});
响应拦截器
javascriptCopy Code
axios.interceptors.response.use(response => {
// 对响应数据进行处理
return response;
}, error => {
// 对响应错误进行处理
return Promise.reject(error);
});
错误处理
你可以通过 catch 或者 try/catch 来捕获请求错误。
javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.response) {
// 服务器响应了一个状态码，表示请求失败
console.error('服务器错误:', error.response.status);
} else if (error.request) {
// 请求已发出，但没有响应
console.error('没有收到响应:', error.request);
} else {
// 设置请求时发生的错误
console.error('请求错误:', error.message);
}
});
通过这些功能，Axios 可以大大简化你在前端与后端交互时的 HTTP 请求逻辑。
