8.axios Http网络请求库(1)

一句话总结

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,帮助你轻松发送请求、接收响应。

Axios is a Promise-based HTTP client for the browser and Node.js, making it easy to send requests and handle responses.

📌 Axios 是什么?(What is Axios)

Axios 是一个 轻量级的 HTTP 请求库,支持浏览器和 Node.js 环境。它封装了 XMLHttpRequest(浏览器)和 http 模块(Node.js),让我们用更简单、统一的方式进行网络通信。

✨ 有什么特性?(Features of Axios)

• 支持 Promise API(可用 async/await)

• 自动转换 JSON 数据

• 拦截请求和响应(request/response interceptors)

• 支持请求取消(cancellation)

• 客户端防止 CSRF 攻击(自动设置 XSRF token)

• 可以设置请求超时、响应数据格式等

• 支持上传、下载进度监听

❓ 为什么需要 Axios?(Why use Axios)

• 原生 fetch 写法繁琐、对旧浏览器支持不好

• XMLHttpRequest 太底层,回调多,难维护

• Axios 提供统一接口、丰富功能,更适合现代开发

✅ Axios 的优点(Advantages of Axios)

• 使用简单,语法清晰

• 默认支持 JSON 数据的处理

• 跨平台支持(浏览器和 Node.js)

• 可配置性强,适合项目中进行统一封装

• 社区活跃,文档完善

🔧 可以做什么?(What can you do with Axios)

• 发送 GET / POST / PUT / DELETE 等 HTTP 请求

• 向后端接口提交表单、JSON、文件等数据

• 调用 REST API 接口并处理返回结果

• 构建基于服务端数据的前端应用(如 Vue / React 项目)

🛠️ 怎么使用?(How to use Axios)

  1. 安装(Install)

npm install axios

yarn add axios

  1. 基本用法(Basic Usage)

import axios from 'axios';

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

.then(response => {

console.log(response.data); // 处理返回数据

})

.catch(error => {

console.error(error); // 处理错误

});

  1. 使用 async/await

async function fetchData() {

try {

const res = await axios.get('https://api.example.com/data');

console.log(res.data);

} catch (err) {

console.error(err);

}

}

  1. 配置请求参数

axios.post('/api/login', {

username: 'test',

password: '123456'

}, {

headers: {

'Content-Type': 'application/json'

},

timeout: 5000

});

  1. 拦截器使用(Interceptors)

axios.interceptors.request.use(config => {

config.headers.Authorization = 'Bearer your_token';

return config;

});

axios.interceptors.response.use(

response => response,

error => Promise.reject(error)

);

相关推荐
艾小码3 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
前端小哲4 小时前
MCP从入门到实战
node.js·ai编程
dasseinzumtode5 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
梅孔立10 小时前
服务器不支持node.js16以上版本安装?用Docker轻松部署Node.js 20+环境运行Strapi项目
服务器·docker·node.js
XiaoMu_00110 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静10 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
lvlv_feifei10 小时前
N8N macOS (Apple Silicon) 完整安装配置教程
node.js·workflow
Cosmoshhhyyy1 天前
Node.js 18+安装及Claude国内镜像使用、idea中claude插件下载指南
node.js
徐_三岁1 天前
关于npm的钩子函数
前端·npm·node.js
不买Huracan不改名1 天前
安装Codex(需要用npm)
前端·npm·node.js