自学前端日记

最新推荐文章于 2024-06-27 09:50:20 发布

曾几何时何必当

最新推荐文章于 2024-06-27 09:50:20 发布

阅读量61

点赞数

分类专栏：前后端交互文章标签：前端 java 服务器开发语言 javascript

本文链接：https://blog.csdn.net/m0_66541899/article/details/125513149

版权

第八篇:基于Promise的axios

【axios是什么】

Axios，是一个基于promise [5] 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest

GitHub 下载地址

文档中文文档

1.准备一个较完整的后端接口服务器提取码（l14u）下载地址

2.测试服务器的接口有无异常

工具 Postman 下载地址

使用方法

-----------------------------------------------准备测试页面---------------------------------------------------------------

<!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>Document</title>

</head>

<body>
    <h3>axios前后端常用接口文档测试</h3>
    <p>[---axios接口测试---]</p>
    <button id="btn01" type="button">点击获取所有人信息</button><br><br>

    <button id="btn02" type="button">点击获取某人信息</button>
    <input type="text" id="person_id" placeholder="请输入个人id"><br><br>

    <button id="btn03">点击添加一个人的信息</button>
    <input type="text" id="personName" placeholder="请输入姓名">
    <input type="text" id="personAge" placeholder="请输入年龄"><br><br>

    <button id="btn04">点击更新一个人的信息</button>
    <input type="text" id="update_id" placeholder="请输入要更新的id">
    <input type="text" id="update_name" placeholder="请输入要更新的姓名">
    <input type="text" id="update_age" placeholder="请输入要更新的年龄"><br><br>

    <button id="btn05" type="button">点击删除某人信息</button>
    <input type="text" id="delete_id" placeholder="请输入要删除的id">
    
</body>

</html>
//引入axios
<script type="text/javascript" src="./js/axios.min.js"></script>
<script>
    // 获取按钮信息
    let btn01 = document.getElementById('btn01');
    let btn02 = document.getElementById('btn02');
    let btn03 = document.getElementById('btn03');
    let btn04 = document.getElementById('btn04');
    let btn05 = document.getElementById('btn05');
    // 获取输入信息
    let personId = document.getElementById('person_id');
    let personName = document.getElementById('personName');
    let personAge = document.getElementById('personAge');
    let updateId = document.getElementById('update_id&#