文章目录
- 前言
- 一、axios的理解和使用
- axios的特点
- axios的安装方式
- axios的基本配置
- 二、axios的基本使用
- 1.axios四种常用请求方式
- 2.四种方式的基本使用
- 基本架构代码示例：
- 1. GET请求
- 2. POST请求
- 3. PUT请求
- 4. DELETE请求
- 3.axios的别名方式请求使用
前言
axios是一个基于Promise的HTTP客户端，可以用在浏览器和node.js中，向服务器发送AJAX请求进行数据交换，是现在前端最热门的请求工具。
注：如果有 懂得Promise和AJAX这两种前置知识那么学习起来会容易点。
提示：以下是本篇文章正文内容，下面案例可供参考
一、axios的理解和使用
axios的特点
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
axios的安装方式
- 使用 npm:
$ npm install axios
- 使用 bower:
$ bower install axios
- 使用 yarn:
$ yarn add axios
- 使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
注意：在项目中推荐使用npm 和 yarn方式，学习阶段推荐CDN引入方式。
axios的基本配置
CDN方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1-axios的配置</title><!-- 这里就放axios的网络js文件就好了 cdn --><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body><script>console.log(axios);</script>
</body>
</html>
打开控制台就能看axios的一些相关信息。
稳定、快速、免费的前端开源项目 CDN 加速服务 ：bootCDN
二、axios的基本使用
1.axios四种常用请求方式
- GET请求 获取数据方式
- POST请求 添加数据方式
- PUT请求 更新/更改数据方式
- DELETE请求 删除数据方式
2.四种方式的基本使用
基本架构代码示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2-axios的使用</title><!-- 引入bootstarp文件库 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"><!-- 引入axios的sdn --><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-headr">基本使用</h2><hr><button type="button" class="btn btn-primary btn-sm">发送GET请求</button><button type="button" class="btn btn-warning btn-sm">发送POST请求</button><button type="button" class="btn btn-success btn-sm">发送PUT请求</button><button type="button" class="btn btn-danger btn-sm">发送DELETE请求</button></div>
</body>
</html>
朋友们如果有幸被你看到，你也和我一起学习axios的话，先需要赋值本基本架构。后面的代码着重scirpt部分也就是功能实现。
前置任务：
需要安装json-server它为我们提供模拟数据相互的效果。指路 ：json-server
去这里看如何安装，新建.json文件，然后把数据放到db.json文件内。
1. GET请求
代码如下（示例）：
// 获取四个按钮元素
const btns = document.querySelectorAll('.btn')// 实现第一个按钮发送GET请求 GET是得到数据btns[0].addEventListener('click', function (){// 发送AJAX请求axios({// 请求类型method: 'GET',// url 参数可选 不带就是显示整个数据列表 带上就是查看某一条数据url: 'http://localhost:3000/posts/1'}).then(response => console.log(response),rejcet => console.warn(rejcet))})
运行截图：
打开控制台找到网络就可以看到我们的结果啦。then后面是输出在控制台的请求结果。
2. POST请求
代码如下（示例）：
// 实现第二个按钮发送POST请求 POST是添加数据btns[1].addEventListener('click', function (){axios({// 请求类型method: 'POST',// URL url: ' http://localhost:3000/posts',// 添加数据data: {title: '这是我们自己添加的title',author: '作者是我们'}}).then(response => console.log(response))})
运行截图：
打开控制台看到网络请求中我们的发送成功了，还想检验的话可去我们创建的db.json文件内查看有无这条数据。
3. PUT请求
代码如下（示例）：
// 实现第三个按钮发送PUT请求 PUT是更新/修改数据btns[2].addEventListener('click', function() {axios({// 请求类型method: 'PUT',// URL 需要改哪一条数据就带哪一条的id// 这里的id是指此条数据唯一的值 一般在数据库中是主键或唯一url: 'http://localhost:3000/posts/3',data: {title: '我用了PUT请求修改了',author: 'me'}}).then(response => console.log(response), rejcet => console.warn(rejcet))})
运行前的截图：
用上面的POST请求按钮多点一次就好啦。我们这里多点一次是为了PUT请求使用的。
运行截图:
我们再去db.json文件内查看是否已被修改。
已成功修改。
4. DELETE请求
代码示例：
// 实现第四个按钮发送DELETE请求 DELETE是删除数据btns[3].addEventListener('click', function() {axios({// 请求类型method: 'DELETE',// URL 想删哪条数据传哪条数据的idurl: 'http://localhost:3000/posts/3'}).then(response => console.log(response))})
运行截图：
我们再打开db.json文件查看id为3的数据是否被删除
已成功被删除了。
3.axios的别名方式请求使用
代码如下（示例）：
data = pd.read_csv('https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
该处使用的url网络请求的数据。
