Axios 详解与利用指南

发表于 2026-2-8 21:19:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

Axios 详解与利用指南

1. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，可以大概在欣赏器和 Node.js 环境中运行。它提供了一种轻便的方式来实验 HTTP 哀求，并支持多种哀求方法，如 GET、POST、PUT、DELETE 等。Axios 的设置机动，支持哀求和相应拦截器、取消哀求、并发哀求处置惩罚等功能，使其成为当代 Web 开辟中非常盛行的选择。
2. Axios 特性

基于 Promise：Axios 完全支持 Promise，使得异步操纵更加直观，特殊是在利用 async/await 时。
支持多种哀求方式：支持常见的 HTTP 哀求方法，满意差异的哀求需求。
欣赏器与 Node.js 兼容：Axios 可同时在前端和后端项目中利用。
拦截器：提供哀求和相应拦截器，允许在哀求或相应到达之进步行处置惩罚。
自动转换 JSON 数据：自动将 JSON 数据转换为 JavaScript 对象。
哀求取消：支持通过 CancelToken 取消哀求。
并发哀求处置惩罚：支持 axios.all 等方法，处置惩罚多个并发哀求。

3. Axios 安装与引入

3.1 利用 npm 安装

npm install axios

复制代码

3.2 利用 Yarn 安装

yarn add axios

复制代码

3.3 在项目中引入

在 ES6 模块化的项目中利用：

import axios from 'axios';

复制代码

大概在 CommonJS 模块化的项目中利用：

const axios = require('axios');

复制代码

4. Axios 根本利用

4.1 GET 哀求

axios.get('/api/user', {
params: {
ID: 12345
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

4.2 POST 哀求

axios.post('/api/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

4.3 并发哀求

function getUser() {
return axios.get('/api/user');
}
function getProfile() {
return axios.get('/api/profile');
}
axios.all([getUser(), getProfile()])
.then(axios.spread((user, profile) => {
console.log('User:', user.data);
console.log('Profile:', profile.data);
}))
.catch(error => {
console.error(error);
});

复制代码

5. Axios 设置项

5.1 全局设置

Axios 提供了全局设置，允许您设置默认的哀求活动。您可以通过 axios.defaults 来设置全局设置，这些设置会应用到每个哀求中。

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

复制代码

5.2 哀求设置

在发送哀求时，可以通过设置对象自界说哀求活动。这些设置项包罗但不限于以下内容：

url：哀求的 URL，默以为哀求的相对路径。
method：哀求方法，如 get、post 等，默认值为 get。
baseURL：将自动加在 url 前面，除非 url 是一个绝对 URL。
headers：自界说哀求头。
params：GET 哀求的 URL 参数，PUT、POST 哀求的 data 会自动序列化为查询字符串。
data：PUT、POST、PATCH 哀求的哀求体。
timeout：哀求超时设置（毫秒），如果哀求超时，将触发 timeout 错误。
responseType：返回的数据格式，如 json、blob、document、arraybuffer、text、stream。
withCredentials：体现跨域哀求时是否必要利用凭据，默以为 false。

const config = {
// 请求的 URL
url: '/api/user',
// 请求方法
method: 'get', // 可以是 'get', 'post', 'put', 'delete', 'patch', 'options', 'head'
// 基础 URL，将自动加在 `url` 前面
baseURL: 'https://api.example.com',
// 自定义请求头
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer token',
'X-Custom-Header': 'foobar'
},
// URL 参数
params: {
ID: 12345
},
// POST、PUT、PATCH 请求的请求体
data: {
firstName: 'John',
lastName: 'Doe'
},
// 请求超时设置（毫秒）
timeout: 5000, // 超时时间设置为5秒
// 响应的数据类型
responseType: 'json', // 选项有 'json', 'blob', 'document', 'arraybuffer', 'text', 'stream'
// `transformRequest` 允许在请求数据发送到服务器之前对其进行修改
// 该函数只适用于请求方法 'PUT', 'POST', 'PATCH'
transformRequest: [(data, headers) => {
// 对 data 进行任意转换处理
data.firstName = data.firstName.toUpperCase();
return JSON.stringify(data);
}],
// `transformResponse` 允许在响应数据传递给 then 或 catch 之前对其进行修改
transformResponse: [(data) => {
// 对 data 进行任意转换处理
data = JSON.parse(data);
data.fullName = `${data.firstName} ${data.lastName}`;
return data;
}],
// 是否跨站点访问控制请求，默认为 false
withCredentials: false,
// 自定义参数序列化
paramsSerializer: params => {
return new URLSearchParams(params).toString();
},
// 取消请求
cancelToken: new axios.CancelToken(cancel => {
// 在请求的执行过程中，可调用 `cancel` 函数来取消请求
// 示例：cancel('Request canceled by the user.');
}),
// 验证状态码是否合法，返回 true 表示合法
validateStatus: status => {
return status >= 200 && status < 300; // 默认的合法范围是 200-299
},
// 自定义处理上传进度事件
onUploadProgress: progressEvent => {
console.log('Upload progress:', progressEvent.loaded);
},
// 自定义处理下载进度事件
onDownloadProgress: progressEvent => {
console.log('Download progress:', progressEvent.loaded);
}
};
// 发送请求
axios(config)
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.error('Error:', error);
});

复制代码

5.3 哀求与相应数据转换

在 Axios 中，可以通过设置 transformRequest 和 transformResponse 来对哀求数据和相应数据举行转换。这两个设置项分别是哀求前和相应后实验的数组函数，数组中的每个函数都会依次实验。

axios.post('/api/user', {
firstName: 'John',
lastName: 'Doe'
}, {
transformRequest: [(data, headers) => {
// 在发送请求前，您可以对 data 进行自定义处理
data.firstName = data.firstName.toUpperCase();
return JSON.stringify(data);
}],
transformResponse: [(data) => {
// 在响应到达客户端之前，您可以对 data 进行自定义处理
data = JSON.parse(data);
data.fullName = `${data.firstName} ${data.lastName}`;
return data;
}]
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

5.4 异步与同步哀求

Axios 默认是异步哀求，基于 Promise。通过 async/await，您可以将异步哀求写成同步代码的情势：

async function getUser() {
try {
const response = await axios.get('/api/user');
console.log(response.data);
} catch (error) {
console.error(error);
}
}
getUser();

复制代码

5.5 哀求取消

Axios 提供了取消哀求的功能，通过 CancelToken 来实现。您可以在必要取消哀求时，调用 cancel 方法。

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/api/user', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.error(error);
}
});
// 取消请求
cancel('Operation canceled by the user.');

复制代码

6. Axios 拦截器

6.1 哀求拦截器

哀求拦截器可以在哀求发送前对其举行处置惩罚。比方，您可以在每次哀求前自动添加 token：

axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer token';
return config;
}, error => {
return Promise.reject(error);
});

复制代码

6.2 相应拦截器

相应拦截器可以在服务器相应到达客户端前对其举行处置惩罚。比方，您可以同一处置惩罚错误信息：

axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
console.error('未授权，请登录');
}
return Promise.reject(error);
});

复制代码

注意：在利用拦截器时，必须确保拦截器函数有 return。否则，拦截器处置惩罚后的结果无法通报给下一个拦截器或终极的哀求/相应处置惩罚。
7. 在项目中的封装与利用

7.1 封装 Axios 实例

在大型项目中，通常会封装 Axios 实例来处置惩罚通用设置和拦截器。

import axios from 'axios';
const apiClient = axios.create({ baseURL: 'https://api.example.com', timeout: 10000, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token' }});// 哀求拦截器apiClient.interceptors.request.use(config => { // 在发送哀求前可以做一些处置惩罚 return config;}, error => { return Promise.reject(error);});// 相应拦截器apiClient.interceptors.response.use(response => { // 在相应到达客户端前可以做一些处置惩罚 return response.data;}, error => { return Promise.reject(error);});export default apiClient;

复制代码

7.2 处置惩罚接口与错误

在封装的 Axios 实例中，可以界说通用的错误处置惩罚逻辑，确保应用步调中的全部 API 哀求都具有同等的错误处置惩罚方式。

apiClient.interceptors.response.use(response => {
return response;
}, error => {
// 自定义错误处理
const { status } = error.response;
switch (status) {
case 401:
console.error('未授权，请重新登录');
break;
case 404:
console.error('请求资源未找到');
break;
default:
console.error('请求错误', error.message);
}
return Promise.reject(error);
});

复制代码

7.3 根本利用

在这个根本上，可以封装常见的 API 哀求方法，比如 GET、POST、PUT、DELETE 等，提供更简便的接口。

const api = {
get(url, params = {}, config = {}) {
return apiClient.get(url, {
params,
...config
});
},
post(url, data = {}, config = {}) {
return apiClient.post(url, data, config);
},
put(url, data = {}, config = {}) {
return apiClient.put(url, data, config);
},
delete(url, params = {}, config = {}) {
return apiClient.delete(url, {
params,
...config
});
}
};
export default api;

复制代码

7.4 通用方法

const http = function(config) {
return apiClient(config)
};
export default http;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金