Axios使用

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。它具有很多优点,如支持 Promise API、拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据、客户端支持防止 CSRF/XSRF 等。以下是 Axios 使用的一些总结:

一、安装与引入

Axios 可以通过 npm 或 yarn 进行安装:

npm install axios

或者

yarn add axios

然后在项目中引入:

import axios from 'axios';

二、基本使用

Axios 的基本使用非常简单,例如发送一个 GET 请求:

axios.get('https://api.example.com/data')

.then(function (response) {

// 处理响应数据

console.log(response.data);

})

.catch(function (error) {

// 处理错误

console.log(error);

});

或者发送一个 POST 请求并传递数据:

axios.post('https://api.example.com/submit', {

firstName: 'Fred',

lastName: 'Flintstone'

})

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

console.log(error);

});

三、请求配置

Axios 的请求可以配置很多选项,例如设置请求头、设置请求超时时间等:

axios({

method: 'post',

url: 'https://api.example.com/submit',

timeout: 1000, // 请求超时时间(毫秒)

headers: {'X-Custom-Header': 'foobar'}, // 自定义请求头

data: {

firstName: 'Fred',

lastName: 'Flintstone'

}

})

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

console.log(error);

});

四、拦截器

Axios 允许你在请求被发送到服务器之前或响应被处理之前对其进行修改或处理。这通过拦截器实现:

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response;

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error);

});

五、取消请求

Axios 提供了一个 CancelToken 源来取消请求:

let CancelToken = axios.CancelToken;

let source = CancelToken.source();

axios.get('/user/12345', {

cancelToken: source.token

}).catch(function (thrown) {

if (axios.isCancel(thrown)) {

console.log('Request canceled', thrown.message);

} else {

// 处理错误

}

});

// 取消请求(请求原因是可选的)

source.cancel('Operation canceled by the user.');

六、全局配置

Axios 允许你设置一些全局配置,这些配置将应用于所有请求:

axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.timeout = 1000;

axios.defaults.headers.common'Authorization' = AUTH_TOKEN;

axios.defaults.headers.post'Content-Type' = 'application/x-www-form-urlencoded';

七、错误处理

在 Axios 中,你可以通过 catch 方法捕获错误。错误对象通常包含响应信息(如果有的话)和请求配置。

axios.get('/user/12345')

.catch(function (error) {

if (error.response) {

// 请求已发出,服务器也响应了状态码,但是状态码不在 2xx 范围内

console.log(error.response.data);}

};

相关推荐
Mh6 小时前
别再只会 `find` 了:Map 在前端业务里的真实用法
前端·javascript
陈随易7 小时前
FFmpeg 9.0 发布,代号 Lei,音视频处理再升级
前端·后端·程序员
爱丶狸7 小时前
Grafana_Zabbix_ImageRenderer_部署与前端操作手册
linux·前端·zabbix·grafana·kylin
用户0595401744610 小时前
把AI对话记忆存储测试从手工改成Playwright+pytest,覆盖率从20%提到96%,回归时间缩短90%
前端·css
kyriewen10 小时前
别再这样写TypeScript了——Code Review中最常见的8个反模式
前端·javascript·typescript
名字还没想好☜10 小时前
Next.js ‘use client‘ 到底加在哪:Server/Client Components 边界与常见报错
开发语言·前端·javascript·react·next.js
午安~婉11 小时前
GitHub Token/ GitHub Stats统计显示图异常
前端·github·vercel·github token
码云之上11 小时前
AI Agent 工程化总览篇:从 Prompt 到 Harness
前端·人工智能
2501_9269783311 小时前
以说明书 DNA 为模板——完整 AGI 的结构图景
前端·人工智能·经验分享·笔记·ai写作
IT_陈寒11 小时前
Vite静态资源引用这个坑我踩得有点疼
前端·人工智能·后端