使用 axios 进行 HTTP 请求


1、介绍

什么是 axios

axios 是一个基于 promise 的 HTTP 库,可以用于浏览器和 Node.js 中发送 HTTP 请求。它的底层实现是 XMLHttpRequest,对开发者提供了简洁的 API 来处理各种 HTTP 请求。

axios 的特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 Node.js 创建 HTTP 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

axios 官网

axios 官网

image-20240623211224545

2、安装和引入

浏览器环境

通过 CDN 引入:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Node.js 环境

通过 npm 安装:

npm install axios

然后在代码中引入:

const axios = require('axios');
3、axios 基本使用

语法

axios.get('url')
    .then(response => {
        // 请求成功处理
    })
    .catch(error => {
        // 请求失败处理
    })
    .then(() => {
        // 请求完成处理(无论成功或失败)
    });

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios Basic Usage</title>
</head>
<body>
    <button class="btn1">基本使用</button>
    <button class="btn2">发送 GET 请求</button>
    <button class="btn3">发送 POST 请求</button>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 基本使用
        document.querySelector('.btn1').addEventListener('click', function() {
            axios.get('https://autumnfish.cn/api/joke/list?num=10')
                .then(response => {
                    console.log(response);
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                })
                .then(() => {
                    console.log('请求完成');
                });
        });
    </script>
</body>
</html>
4、axios 发送 GET 请求

语法

axios.get('url', {
    params: { key: value }
})
.then(response => {
    // 请求成功处理
});

示例

document.querySelector('.btn2').addEventListener('click', function() {
    axios.get('https://autumnfish.cn/api/joke/list', {
        params: { num: 10 }
    }).then(response => {
        console.log(response.data);
    });
});
5、axios 发送 POST 请求

语法

axios.post('url', {
    key: value
})
.then(response => {
    // 请求成功处理
});

示例

document.querySelector('.btn3').addEventListener('click', function() {
    axios.post('http://www.liulongbin.top:3009/api/login', {
        username: '1423543',
        password: 'afsfs'
    }).then(response => {
        console.log(response.data);
    });
});
6、高级使用

拦截器

axios 提供了请求和响应拦截器,可以在请求或响应被处理前做一些操作。

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

取消请求

可以使用 CancelToken 取消请求。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        cancel = c;
    })
});

// 取消请求
cancel();

并发请求

axios 提供了 axios.allaxios.spread 方法来处理并发请求。

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread((acct, perms) => {
        // 两个请求现在都执行完成
        console.log(acct.data);
        console.log(perms.data);
    }));

错误处理

处理请求中的错误是非常重要的,axios 提供了详细的错误信息。

axios.get('/user/12345')
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        if (error.response) {
            // 请求已发出,服务器响应了状态码,但状态码超出了 2xx 范围
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            // 请求已发出,但没有收到响应
            console.log(error.request);
        } else {
            // 发生了在设置请求时触发的错误
            console.log('Error', error.message);
        }
        console.log(error.config);
    });
7、总结

axios 是一个功能强大的 HTTP 请求库,适用于浏览器和 Node.js 环境。它提供了丰富的功能,包括请求和响应拦截器、取消请求、并发请求处理等。通过本文的介绍,你应该能够掌握 axios 的基本用法和一些高级用法,并在实际项目中灵活应用。。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部