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)

);

相关推荐
RoyLin2 小时前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
林九生4 小时前
【NodeJS】使用 NVM 安装 Node.js 22 并配置国内镜像加速
node.js
风清云淡_A5 小时前
【VUECLI】node.js打造自己的前端cli脚手架工具
前端·node.js
Never_Satisfied5 小时前
在JavaScript / Node.js中,SQLite异步查询函数实现
javascript·sqlite·node.js
weixin_456904275 小时前
前端开发时npm install报错解决方案
前端·npm·node.js
RoyLin6 小时前
V8引擎与VM模块
前端·后端·node.js
蓝莓味的口香糖8 小时前
【npm】npm命令大全
前端·npm·node.js
aricvvang10 小时前
一行 Promise.all 争议:数据库查询并行真的没用?我和同事吵赢了!!!
javascript·后端·node.js
新时代农民工--小明11 小时前
Node.js命令行工具开发
node.js