axios （ ajax pro ）

已于 2023-07-14 09:29:24 修改
阅读量1.3k 收藏
点赞数
分类专栏： IDEA-Java各开发环境安装和常见问题解决 Java小白成长 文章标签： ajax 前端 axios java
于 2023-07-13 23:26:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PY_XAT_SFZL/article/details/131713245
版权
axios是一个基于Promise的HTTP库，用于前端与服务器进行数据交换，支持get和post等多种请求方式。相较于原生ajax，axios提供了更简洁的API，使得异步刷新操作更为方便。文章通过实例展示了如何使用axios进行数据获取和渲染表格。
摘要由CSDN通过智能技术生成

axios

什么是 axios

axios 介绍

根据我的理解就是对于原生ajax的一个封装，以达到方便使用异步刷新的目的。
ajax是什么呢?（Asynchronous JavaScript And XML，异步的JavaScript和XML） 首先要理解异步刷新，简单来说就是一个对于一个前端页面，总体的页面内容不刷新，局部的页面进行刷新，比如：大家都进行过网购，在购物网站的首页当选择某个标签时，下面的分类和商品也相应的变化了，但是页面其它部分的内容并没有改变，这就是异步刷新，还有就是在使用百度搜索时，你会发现输入部分内容相关的内容也会呈现出来，这也是异步刷新。
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
ajax和axios有什么区别呢？
根据我的理解就是对于原生ajax的一个封装，使用起来更加的方便快捷。
在这里插入图片描述

axios官网： https://www.axios-http.cn/

axios 的使用

页面请求方式常用的有2种 get 和 post 请求，这里就对这种方式进行使用说明

  1. 普通方式
<script src="js/axios-0.18.0.js"></script>  /*引入js文件*/


<script>
    asios({
        method: "get",
        url:""
    }).then(function (res) {
        let data = res.data.data;
    });
</script>

<script>

    asios({
        method: "post",
        url: "请求资源的地址",
        data:"id=1"
    }).then(function (res){

        let data = res.data.data;
        // 返回的对象的参数   res 函数 是一个 回调函数  返回的数据会和状态码等 封装成一个data对象
        // 第二个data是第一个data对象的一个参数  在这里是存放数据的
    } );


</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 axios.get("https://yapi.pro/mock/40836/emp/list").then((result) => { 

<!-- 回调函数 callback -->

let res = result.data.data;

})

<script>
<!--目前先写一个参数的，后面再补充-->
    axios.post("https://yapi.pro/mock/40836/emp/deleteById","id=1").then((res) => {

        console.log(res.data);
    });


</script>

ps: 模拟服务器端地址，如果这个地址无法使用了，内容如下:

{
    "code": 1,
    "message": "success",
    "data": [
        {
            "id": 1,
            "name": "谢逊",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2008-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 2,
            "name": "殷天正",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
            "gender": 1,
            "job": "讲师",
            "entrydate": "2012-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 3,
            "name": "韦一笑",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
            "gender": 1,
            "job": "讲师",
            "entrydate": "2020-05-09",
            "updatetime": "2022-10-01 12:00:00"
        },
        {
            "id": 4,
            "name": "黛绮丝",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
            "gender": 2,
            "job": "讲师",
            "entrydate": "2018-07-09",
            "updatetime": "2022-10-01 12:00:00"
        }
    ]
}

在这里插入图片描述

axios 工具包下载

在我的上传资源文件中就可以下载，也可以从官网下载

axios 使用实例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ajax-Axios-案例</title>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" width="60%" id="table" align="center">
        <caption style="font-size: 20px">教师信息表</caption>
        <tr id="head">
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职日期</th>
            <th>最后操作时间</th>
        </tr>


    </table>

    <button id="btn"  onclick="test()" >location测试</button>

</div>

<!--https://yapi.pro/mock/40836/emp/list-->
<!--https://yapi.pro/mock/40836/emp/deleteById-->


<!--
  使用Axios向指定后台发送请求，将拉取的数据渲染成HTML表格
  后台的数据地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
-->
<script>

    let test = function () {
        location.reload();
       // location.refrush();
    };

    axios.get("https://yapi.pro/mock/40836/emp/list").then((result) => {
        //请求到的数据  是一个js对象数组
        let objarr = result.data.data;

       console.log(objarr);

        console.log(objarr[0].src);

        let str = "";
        // 遍历对象数组
        for (let arr of objarr) {
            // 拼接
            str+="<tr>";
            str += "<td>"+arr.id+"</td>";
            str += "<td>"+arr.name+"</td>";
            str += "<td>"+"<img src='"+arr.image+"' width='70px' height='50px'>"+"</img></td>";
            arr.gender ==1 ? str += "<td>"+"男"+"</td>" :str += "<td>"+"女"+"</td>";
            str += "<td>"+arr.job+"</td>";
            str += "<td>"+arr.entrydate+"</td>";
            str += "<td>"+arr.updatetime+"</td>";
            str+="</tr>";
        }

        let innerHTML = document.getElementById("table").innerHTML;
        innerHTML += str;
        document.getElementById("table").innerHTML = innerHTML;



    });



</script>

</body>
</html>


// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
PY_XAT_SFZL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax的封装——Axios与jQuery
pro1822的博客
04-23 2935
Ajax的封装——Axios与jQuery
vue ajax登入,vue+vuex+axios 实现简单登录
weixin_39869432的博客
08-06 778
1.创建vue项目2.创建登录页在views下创建一个login.vue文件 -文件内容一个简单登录页登录import { mapActions } from 'vuex'export default {data(){return{data:{username:'123456',password:'123456',}}},methods:{...mapActions(['handleLogin',...
Ajax和axios
darksociety的博客
03-22 181
Ajax 和 Axios ajax 什么是ajax Async javascript and XML AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 ajax优势 改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点。AJAX允许网页持续更新
ajax、axios、alova的区别
muzidigbig的博客
12-15 1216
axios 是目前流行的基于 Promise 的 HTTP 请求库，它可以在浏览器和 Node.js 中工作。axios 支持各种请求类型、拦截请求和响应等等。axios 通过 Pro alova 是一个基于Vue.js 和 async/await的 HTTP 请求库。它也类似于 axios，提供了请求拦截、响应拦截、取消请求等功能，并且根据 Vue 的特点，可以非常方便地和 Vue.js 集成。和 axios 不同的是，alova 使用 async/await 进行异步操作，让代码更加简洁易懂。。})})
最新最全的前端面试题集锦之 Ajax、Fetch、Axios 篇
XH_jing的博客
08-09 2941
该内容主要整理关于 Axios 的相关面试题，其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。 目录一、Ajax 相关面试题1、概念2、作用3、创建 Ajax4、Ajax 状态和 HTTP 状态码5、Ajax 中常用的属性和方法6、思考：post 和 get 有什么区别二、Axios 相关面试题1、axios 原理2、axios 的特点有哪些？3、axios 有哪些常用方法？3、一次并发的请求 axios.all([])4、说下你了解的axios相关配置属性？三、Fetch 相关面.
Ajax-03.Axios-案例
程小白的博客
08-14 416
【代码】Ajax-03.Axios-案例。
Ajax,Axios,Fetch的学习,对比和使用
weixin_43730446的博客
12-09 378
传统的 ajax 利用的是 XMLHttpRequest 这个对象，和后端进行交互。JQuery ajax 是对原生 XHR 的封装，多请求间有嵌套的话就会出现回调地狱的问题。配置： url,method,baseURL,transformRequest,headers,params,auth,proxy。fetch 是原生的 js，使用的是 promise，比ajax方便异步,没有回调地狱的问题。常用方法：get，post，put，patch，delete。没有使用数据流，所有的请求都必须完成后才拿到。
Ajax详解
m0_63260018的博客
07-15 2612
Ajax 是 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）的缩写。它是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。简单来说，Ajax 可以让网页在不影响用户体验的前提下，实时更新数据。
（promise.all、promise.race、promise.any、axios同步请求、ajax同步请求）
m0_66970189的博客
07-21 745
axios执行异步的请求，我们可以使用async和await进行操作，让axios实现同步请求。就可以获取相关的信息，只要判断里面的值是否包含Android或者ISO就可以进行判断。
vue2.0设置proxyTable使用axios进行跨域请求的方法
01-19
然后在要调用的方法或是钩子中请求，$ajax就是上面注册的axios，如果想直接用axios不想设置prototype也可以直接按官方的文档来写 vue在配置文件中提供了proxyTable来设置跨域，在config文件夹的inde
Ajax和axios的概念、使用 、区别以及跨域
weixin_48196628的博客
07-17 585
Ajax 和 Axios ajax 什么是ajax Async javascript and XML { name:"王凯", age:2, sex:"未知" } <user> <name>王凯</name> <age>2</age> <sex>未知</sex> </user> AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服
Ajax 解决回调竞争
大黄鸭在发光的专栏
09-07 401
即多次快速点击同一按钮导致多个异步的AJAX请求同时返回，导致数据更新顺序混乱。这种情况在异步编程中很常见，特别是前端开发时，AJAX请求的回调并不保证按顺序执行。回调函数，这样每个 AJAX 请求在发送前和完成后都可以执行相应的逻辑。
Ajax和XMLHttpRequest之间的关系
Keep trying, keep going
09-10 301
Ajax和XMLHttpRequest之间的关系是非常密切的。而XMLHttpRequest是Ajax的核心技术之一。XMLHttpRequest：这是一个JavaScript对象，它为浏览器提供了在不刷新页面的情况下与服务器交换数据并更新部分网页的能力。总的来说，Ajax和XMLHttpRequest是相辅相成的。XMLHttpRequest提供了实现Ajax所需的底层支持，而Ajax则是利用XMLHttpRequest实现了更高级的功能，如页面的部分更新等。
xhr、ajax、axois、fetch的区别
yiguoxiaohai的博客
09-04 1634
XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：
JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)
最新发布
你好, 我在学java的博客
09-10 772
JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 535
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 786
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 720
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
axios 和ajax
07-14
axios和jquery ajax的区别在于： 1. axios是基于Promise的，而jquery ajax是基于回调函数的。 2. axios支持浏览器和Node.js环境，而jquery ajax只支持浏览器环境。 3. axios可以拦截请求和响应，而jquery ajax不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PY_XAT_SFZL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值