Axios库使用

2026年5月15日·#javawebai/前端基础前端/Ajax·393 字 2 分钟

浏览量加载中...

AI 摘要- DeepSeek

基于Promise的Axios HTTP客户端发送GET/POST请求及与async/await配合使用

Axios库使用#

定义#

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境。它对原生的Ajax进行了封装，简化了HTTP请求的编写和响应处理。

语法/用法#

官方文档#

Axios官网：https://www.axios-http.cn

引入Axios#

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

通用方式发送请求#

1
// GET请求
2
axios({
3
    url: 'https://api.example.com/data',
4
    method: 'get'
5
}).then(function(res) {
6
    console.log(res.data);
7
}).catch(function(err) {
8
    console.log(err);
9
})
10

11
// POST请求
12
axios({
13
    url: 'https://api.example.com/update',
14
    method: 'post'
15
}).then(function(res) {
16
    console.log(res.data);
17
}).catch(function(err) {
18
    console.log(err);
19
})

请求方法别名#

1
// GET请求
2
axios.get("https://api.example.com/data")
3
    .then(result => {
4
        console.log(result.data);
5
    })
6

7
// POST请求
8
axios.post("https://api.example.com/update", "id=1")
9
    .then(result => {
10
        console.log(result.data);
11
    })
12

13
// 带参数GET请求
14
axios.get(`https://api.example.com/list?name=${name}&gender=${gender}&job=${job}`)
15
    .then(res => {
16
        this.empList = res.data.data;
17
    })

与async/await结合使用#

1
async search() {
2
    const result = await axios.get(
3
        `https://api.example.com/list?name=${this.searchForm.name}`
4
    );
5
    this.empList = result.data.data;
6
}

常见场景#

GET请求：获取数据、查询操作
POST请求：提交表单、创建数据
PUT请求：更新数据
DELETE请求：删除数据
并发请求：同时发送多个请求并处理

注意事项#

引入方式：
- 可以通过CDN引入（在线）
- 可以通过npm安装（本地）
- 建议使用离线版本以提高稳定性
响应处理：
- 响应数据在res.data中
- 使用.then()处理成功响应
- 使用.catch()处理错误响应
请求方法区别：
- GET请求参数在URL中
- POST请求参数在请求体中
async/await优化：
- 使用async/await可以让异步代码像同步代码一样编写
- 提高代码可读性和可维护性
- 建议在前端项目中优先使用此方式
常见错误处理：
- 网络错误
- 服务器返回错误状态码
- 超时问题
- 跨域问题