使用 axios 进行 HTTP 请求

文章目录

- - 使用 axios 进行 HTTP 请求
  - - 1、介绍
    - 2、安装和引入
    - 3、axios 基本使用
    - 4、axios 发送 GET 请求
    - 5、axios 发送 POST 请求
    - 6、高级使用
    - 7、总结

1、介绍

什么是 axios

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

axios 的特性

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

axios 官网

axios 官网

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.all 和 axios.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);
    });