使用 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);});