文章目录
前言
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 想删哪条数据传哪条数据的id
url: '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网络请求的数据。
2552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
