Axios请求

# Axios

# 介绍

Axios是一个流行的基于Promise 的网络请求库，用于在浏览器和Node.js中进行HTTP请求。它提供了简单易用的 API，可以发送各种类型的请求（如GET、POST、PUT、DELETE等），并处理响应数据。

中文文档地址：https://www.axios-http.cn/docs/intro

# 主要特性

特性	说明
Promise API	支持 `then / catch`，也可配合 `async/await` 使用
请求/响应拦截器	在请求发送前或响应返回后统一处理（如添加 token、统一错误处理）
自动转换 JSON	自动把响应的 JSON 字符串转为对象，发送对象时自动序列化为 JSON
取消请求	通过 `CancelToken` 中止不再需要的请求
并发请求	`axios.all`、`axios.spread` 可一次发起多个请求并统一处理
全局/实例化配置	`axios.defaults` 或 `axios.create()` 让不同业务拥有独立的配置
跨平台	同一套代码可在浏览器、Node、React、Vue 等前端框架中使用

# 安装方式

既可以通过npm安装也可以直接在HTML中引入。

# npm安装 (在Node.js中安装)
npm install axios

# CDN引用 (直接在HTML中引入)
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1
2
3
4
5

# 简单例子

# Python启用服务端

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/info')
def info():
    res = jsonify({'username': 'Hello', 'age': 18})
    # 解决跨域
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Axios发送GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试页面</title>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
</head>
<body>
<div id="app">
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>
    <button @click="handleButton">查询数据</button>
</div>
<script>
    import axios from 'axios';
    const {createApp, ref} = Vue;
    createApp({
        setup() {
            let username = ref()
            let age = ref()
            function handleButton() {
                axios.get("http://127.0.0.1:5000/info").then(
                    // 返回的是HTTP响应对象
                    res=>{
                        console.log(res)
                        username.value = res.data.username
                        age.value = res.data.age
                    }
                )
            }
            return {username, age, handleButton}
        }
    }).mount("#app")
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#前端 #Axios

← Vue指令系统 Vue计算与监听属性→