Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js，它可以用来发送异步 HTTP 请求，包括 GET、POST、PUT、DELETE 等方法，以下是关于 Axios 的详细介绍：
1、安装与导入
安装：使用 npm 或 yarn 安装 Axios。
npm install axios
或者
yarn add axios
导入：在 JavaScript 文件中导入 Axios。
import axios from 'axios';
2、发送请求
GET 请求：发送一个 GET 请求并获取数据。
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error(error));
POST 请求：发送一个 POST 请求并传递数据。
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1,
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
其他请求：Axios 支持 PUT、DELETE 等其他 HTTP 方法。
// PUT 请求
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
body: 'updated body'
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
// DELETE 请求
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => console.log(response.data))
.catch(error => console.error(error));
3、配置请求
全局配置：设置默认的配置项，如 baseURL、timeout 等。
import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';
局部配置：在每次请求时传入配置项。
axios.get('/user/12345', {
params: { id: 12345 },
headers: { 'Content-Type': 'application/json' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
4、处理响应
成功响应：在.then 方法中处理成功的响应数据。
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.headers);
})
.catch(error => console.error(error));
错误处理：在.catch 方法中处理请求错误。
axios.get('https://jsonplaceholder.typicode.com/todos/999')
.then(response => console.log(response.data))
.catch(error => {
if (error.response) {
console.error('Error Response:', error.response.data);
console.error('Error Status:', error.response.status);
console.error('Error Headers:', error.response.headers);
} else if (error.request) {
console.error('Error Request:', error.request);
} else {
console.error('Error Message:', error.message);
}
});
5、拦截器
请求拦截器：在请求发送前进行拦截处理。
axios.interceptors.request.use(config => {
console.log('Starting Request', config);
return config;
}, error => {
return Promise.reject(error);
});
响应拦截器：在响应返回后进行拦截处理。
axios.interceptors.response.use(response => {
console.log('Response Data:', response.data);
return response;
}, error => {
return Promise.reject(error);
});
6、取消请求
取消单个请求：使用CancelToken 来取消请求。
const CancelToken = axios.CancelToken;
let cancel;
axios.get('https://jsonplaceholder.typicode.com/todos/1', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
})
.then(response => console.log(response.data))
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
console.error('Error', thrown);
}
});
cancel('Request canceled by the user');
批量取消请求：可以创建一个数组来存储多个CancelToken，然后批量取消。
const requests = [];
for (let i = 0; i < 5; i++) {
const cancelToken = axios.CancelToken.source();
requests.push({ cancelToken: cancelToken, request: axios.get('https://jsonplaceholder.typicode.com/todos/' + (i + 1), { cancelToken: cancelToken.token }) });
}
requests[0].cancelToken.cancel('Batch cancel');
7、并发请求
使用axios.all 方法：同时发送多个请求，并在所有请求完成后统一处理结果。
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('Account:', acct.data);
console.log('Permissions:', perms.data);
}))
.catch(error => console.error(error));
使用Promise.all 方法：同样可以实现并发请求。
Promise.all([axios.get('/user/12345'), axios.get('/user/12345/permissions')])
.then(([acct, perms]) => {
console.log('Account:', acct.data);
console.log('Permissions:', perms.data);
})
.catch(error => console.error(error));
8、上传文件
使用 FormData：可以通过FormData 对象上传文件。
const formData = new FormData();
formData.append('file', file); // 假设 file 是用户选择的文件对象
formData.append('name', 'John Doe');
formData.append('age', 30);
axios.post('/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
上传多个文件：可以在FormData 中添加多个文件。
const formData = new FormData();
formData.append('files[]', file1); // 假设 file1 是用户选择的第一个文件对象
formData.append('files[]', file2); // 假设 file2 是用户选择的第二个文件对象
formData.append('description', 'Sample files');
axios.post('/uploadMultiple', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
上传文件并附带额外数据：可以在FormData 中同时添加文件和其他数据。
const formData = new FormData();
formData.append('file', file); // 假设 file 是用户选择的文件对象
formData.append('username', 'JohnDoe');
formData.append('age', 30);
axios.post('/uploadWithAdditionalData', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
上传大文件：可以使用axios 的onUploadProgress 事件来处理大文件上传进度。
const formData = new FormData();
formData.append('file', file); // 假设 file 是用户选择的文件对象
formData.append('description', 'Large file upload');
axios.post('/uploadLargeFile', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: progressEvent => {
console.log('Upload Progress:', Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
上传二进制数据：可以直接上传二进制数据。
const binaryData = new Blob(['Hello World!'], { type: 'text/plain' });
const formData = new FormData();
formData.append('file', binaryData, 'hello_world.txt');
axios.post('/uploadBinary', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
各位小伙伴们，我刚刚为大家分享了有关“axios js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/655591.html
微信扫一扫 
