使用 axios 进行 HTTP 请求

使用 axios 进行 HTTP 请求


文章目录

      • [使用 axios 进行 HTTP 请求](#使用 axios 进行 HTTP 请求)
1、介绍

什么是 axios

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

axios 的特性

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

axios 官网

axios 官网

2、安装和引入

浏览器环境

通过 CDN 引入:

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Node.js 环境

通过 npm 安装:

bash 复制代码
npm install axios

然后在代码中引入:

javascript 复制代码
const axios = require('axios');
3、axios 基本使用

语法

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

示例

html 复制代码
<!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 请求

语法

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

示例

javascript 复制代码
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 请求

语法

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

示例

javascript 复制代码
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 提供了请求和响应拦截器,可以在请求或响应被处理前做一些操作。

javascript 复制代码
// 添加请求拦截器
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 取消请求。

javascript 复制代码
const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel();

并发请求

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

javascript 复制代码
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 提供了详细的错误信息。

javascript 复制代码
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 的基本用法和一些高级用法,并在实际项目中灵活应用。。

相关推荐
Luck小吕2 分钟前
两天两夜!这个 GB28181 的坑让我差点卸载 VSCode
后端·网络协议
ZVAyIVqt0UFji37 分钟前
360 OpenStack支持IP SAN存储实现
网络·网络协议·tcp/ip·openstack
三思而后行,慎承诺2 小时前
tcp 和http 网络知识
网络·tcp/ip·http
JavaEdge.2 小时前
LangChain4j HTTP 客户端定制:解锁 LLM API 交互的更多可能性
网络·网络协议·http
Hy行者勇哥2 小时前
形象解释 HTTP 的四种常见请求方式及其中的区别联系
网络·网络协议·http
Cuit小唐2 小时前
TCP 协议:原理、机制与应用
网络·网络协议·tcp/ip
电鱼智能的电小鱼3 小时前
EFISH-SBC-RK3588无人机地面基准站项目
linux·网络·嵌入式硬件·机器人·无人机·边缘计算
电鱼智能的电小鱼3 小时前
基于 EFISH-SBC-RK3588 的无人机环境感知与数据采集方案
linux·网络·嵌入式硬件·数码相机·无人机·边缘计算
Arenaschi4 小时前
SQLite 是什么?
开发语言·网络·python·网络协议·tcp/ip
白帽Gavin4 小时前
SMB协议
网络协议