在前端开发中,与服务器进行通信是非常常见的需求。无论是获取数据、发送表单,还是上传文件,HTTP 请求都扮演着重要角色。虽然 JavaScript 提供了原生的 fetch
API 和 XMLHttpRequest
,但它们在处理复杂请求时可能不太方便。这时候,Axios
作为一个基于 Promise 的 HTTP 客户端库,提供了更加简洁和强大的解决方案。
一、Axios 简介
Axios 是一个基于 Promise 的 HTTP 客户端,可以运行在浏览器和 Node.js 中。它具有以下特点:
- 支持 Promise:使用异步请求时可以使用
async/await
。 - 拦截请求和响应:可以在请求发送前或响应到达后进行处理。
- 取消请求:支持通过
CancelToken
取消请求。 - 自动转换 JSON 数据:请求和响应中的 JSON 数据会自动转换为 JavaScript 对象。
- 客户端支持防御 XSRF:有助于保护应用免受跨站请求伪造(XSRF)的攻击。
二、安装 Axios
在使用 Axios 之前,需要先将其安装到你的项目中。你可以通过 npm 或 yarn 安装:
npm install axios
或者
yarn add axios
安装完成后,你可以在项目的 JavaScript 文件中导入 Axios:
import axios from 'axios';
三、基本使用方法
1. 发送 GET 请求
GET 请求通常用于从服务器获取数据。使用 Axios 发送 GET 请求非常简单:
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
通过 axios.get(url)
发送请求,response.data
包含服务器返回的数据。
2. 发送 POST 请求
POST 请求用于向服务器发送数据。你可以通过 axios.post(url, data)
发送 POST 请求:
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
在这个例子中,我们将一个 JSON 对象发送到服务器,并打印返回的数据。
3. 发送 PUT 请求
PUT 请求通常用于更新服务器上的资源。类似于 POST 请求,你可以使用 axios.put(url, data)
发送 PUT 请求:
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
title: 'updated title',
body: 'updated body',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
4. 发送 DELETE 请求
DELETE 请求用于删除服务器上的资源。使用 axios.delete(url)
发送 DELETE 请求:
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('Post deleted:', response.data);
})
.catch(error => {
console.error('There was an error!', error);
});
四、高级用法
1. 请求和响应拦截器
Axios 允许你在请求或响应被 then
或 catch
处理之前拦截它们。这对于全局处理错误、设置通用的请求头部或记录日志非常有用。
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer token';
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
2. 设置默认配置
你可以设置 Axios 的全局默认配置,如基 URL、请求超时时间、请求头等:
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';
3. 取消请求
在某些情况下,你可能需要取消一个正在进行的请求,Axios 提供了 CancelToken
来实现这一功能:
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/longRequest', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
// 取消请求
cancel('Request canceled.');
4. 并发请求
如果你需要同时发送多个请求,并且在所有请求都完成后执行某些操作,可以使用 axios.all
和 axios.spread
:
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
// 当这两个请求都完成后执行此操作
console.log(acct.data);
console.log(perms.data);
}));
5. 上传文件
Axios 也可以轻松处理文件上传操作。你可以使用 FormData
对象来构建请求数据:
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log('File uploaded successfully:', response.data);
})
.catch(error => {
console.error('There was an error uploading the file!', error);
});
五、总结
Axios 是一个功能强大且易于使用的 HTTP 客户端,特别适合在现代 JavaScript 应用程序中进行网络请求。无论你是在处理简单的 GET 请求,还是在处理复杂的拦截器和文件上传,Axios 都提供了简洁的 API 和灵活的配置选项。