Ajax,Promise,Async await的使用

最新推荐文章于 2025-03-21 11:01:13 发布
最新推荐文章于 2025-03-21 11:01:13 发布
阅读量311 收藏
点赞数
文章标签： ajax javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40790248/article/details/124832623
版权
本文详细介绍了Ajax技术，它允许在不刷新整个页面的情况下更新内容。Ajax主要利用JavaScript的XMLHttpRequest对象进行异步数据交换，并常与JSON而非XML一起使用。此外，文章还探讨了Promise如何解决回调地狱问题，以及如何通过正确的Promise链式调用来避免此类问题。最后，提到了 Async/Await 的概念，作为更简洁的异步编程方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Ajax:异步的 JavaScript 和 XML ,是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的方法

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML. 

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json 

AJAX 异步实现步骤：

        Ajax 请求的五大步骤_没有天赋全靠手打的博客-优快云博客_ajax请求的五个步骤
 


Promise：解决异步请求回调地狱的问题（请求3需要请求2的数据，请求2需要请求1的数据这种）

图片中的三个get方法，getAlbums()方法请求数据所需的参数来自getComments()请求回来的数据，而getComments()方法请求数据所需的参数来自getTodos()请求回来的数据。图中只是演示，所以没有写全

 下图，created生命周期中注释的就是Promise的错误使用，这样还是有回调地狱的问题

下图才是正确的用法，.then方法中返回 this.getComments() 这个Promise对象后，用 .then调用继续请求（.then的链式调用）

 

Async await

 

 

 

 

 

前端：一篇彻底搞懂基于PROMISE的使用(AJAX,FETCH,AXIOS,ASYNC/AWAIT)
GIS摆渡人
04-29 560
文章目录一 PROMISE用法PromisePromise的相关概念基于promise发送ajax请求promise常用的API二 接口调用 FETCH 用法基本特性GET请求DELETE 请求POST请求 传统参数三 接口调用 AXIOS 用法基本特性:axios常用APIGET传递参数POST传递参数四 接口调用 ASYNC/AWAIT 用法 一 PROMISE用法 Promise resolve成功状态 reject拒绝状态 then是前面返回promise的处理 Promise的相关概念 es6新语
ES6笔记————promise创建，封装ajax，async与await
m0_45293340的博客
09-12 669
ES6笔记————promise创建，封装ajax，async与await
深入掌握Ajax + Promise + Async + await 异步解决方案
qq_47969241的博客
09-28 1164
随着前端技术的不断更替，Ajax在整个JavaScript以及整个前端发展史都占据非常重要的地位，那么什么是Ajax? AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术，并不是一个新的编程语言喔！它是属于JavaScript网络请求模块的一部分。 传统回调函数会造成回调地域问题，类似不同的异步函数相互嵌套，导致加重寻找bug的难度和代码的美观度的减少。 那么这一次我们就来做一次对Ajax使用的深入透析。 首先我们先来看看我们的文件目录: json文件夹下有个静...
Promise、async/await和Promise封装ajax
azkhx的博客
09-07 545
Promise、async/await和Promise封装ajax
JavaScript $.ajax() 最新用法详解
最新发布
aadnf的博客
03-21 1029
通过掌握以上内容，可以高效使用 $.ajax() 处理复杂的前端请求场景，同时结合现代 JavaScript 特性提升代码可读性和可维护性。浏览器开发者工具（F12）的 ​Network 面板。​二、现代回调方式（Promise 风格）​。​三、异步处理与 async/await。​八、jQuery 3.x 的重要变化。​七、替代方法：更简洁的 API。​3. 跨域请求（CORS）​。​1. 发送 JSON 数据。一、基础语法与核心参数。​五、错误处理最佳实践。
Promise+ajax && async+await+promise+ajax
MorningDuGe
07-08 741
Peomise+Ajax//创建XHR对象 function creatXHR() { var xhr; if(window.XMLHttpRequest){ xhr = new window.XMLHttpRequest(); }else if(window.ActiveXObject('MicrosoftXMLHTTP')){
Javascript 同步和异步，ajax/promise/async+await的理解
灬Manong 博客
08-06 1046
同步和异步 什么是同步 意思大概就是执行完一步后再执行下一步（执行队列依次执行），如： console.log(1); console.log(2); console.log(3); => 1 => 2 => 3 什么是异步 意思就是下一步无需等上一步完结后再执行，就如下一步可以独立新队列自己执行而不同等待上一步完结 console.log(1); setTimeout(()=>{console.log(2);},200); console.log(3); => 1 =&gt
【ajax核心04】利用async、await解决显式promise链问题
大前端开发工程师、互联网方向创业者
06-23 559
async与await解决现实promise链调用问题、try...catch语句执行错误信息捕获
前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await
成长的嘻嘻哥
04-26 823
前端异步请求从 原生js的xmlhttprequest 到 jquery的ajax 到 es6的promise 到 es7的async/await，一整套流程
Promise\async\await\setTimerout面试题
hole_diss的博客
11-09 694
Pomise, setTimerout相对比较容易，Pomise基于链式调用比较清晰，setTimerout作为宏任务在后期执行async\await出现各类返回值的情况下，情况比较复杂。
从ajax到promise到async await
luo_1010的博客
06-28 995
ajax发送请求的原生简单写法 var xhr = new XMLHttpRequest() xhr.open('get','http://localhost:3000/data1') xhr.send() xhr.onreadystatechange = function(){ if(xhr.readyState===4) { var ret = xhr.responseT...
async与await结合发送AJAX请求小案例
czj1049561601的博客
02-28 1142
为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！ async函数与await函数基本原理介绍 https://blog.csdn.net/czj1049561601/article/details/114238733 案例内容： 通过点击屏幕上的按钮来过去接口中的笑话，并进行打印！ 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
async+await：发送Ajax请求
席木木的博客
07-17 3158
async关键字用于修饰函数，async函数的返回值为Promise对象，await表达式可以将Promise对象转换为普通JavaScript类型，并取出Promise对象状态为成功时的返回结果值。
async和await方式 实现 ajax
qq_56042698的博客
01-02 671
promise async、await ajax
使用await/async函数代替jquery的ajax函数
缪子龙的博客
08-15 5520
其实在10年前,我读大学的期间,感觉jquery的ajax太好用了,但是随着时代的发展,JS的坑点越来越明显,其中一点就是地狱回调的问题,好在es7中提出了await/async函数 本文将jquery中的ajax转化成使用await/async函数的使用方式 首先需要定义一个函数,用于返回Promise类型的对象,接着需要使用resolve和reject函数用于异步处理结果 func...
AJAX ---- 4 async 和 await 使用
love33441314520的博客
08-16 650
逐行执行，需原地等待结果后，才继续向下执行异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数。
ajax 请求 回调,Ajax请求回调地狱及解决方案（promise、async和await）
weixin_34603379的博客
08-05 1381
谈及回调地狱发生得情况和解决办法，就必须追溯到原生ajax请求。先列出服务器提供的数据接口：// 服务器端接口app.get('/data1', (req, res) => {res.send('hi')})app.get('/data2', (req, res) => {res.send('hello')})app.get('/data3', (req, res) => {re...
async与await封装ajax请求
马优晨
06-29 1185
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>发送 AJAX 请求</title> </head> <body> <scri.
async_await封装JQuery的Ajax请求,解决多层回调问题
菜鸟记录
09-25 1248
⏹async_await封装jQuery的Ajax请求
ajax promise async/await
08-30
Ajax是一种用于在Web应用程序中发送异步请求的技术。Promise是一种处理异步操作的对象，它可以表示一个异步操作的最终完成或失败，并返回一个值。Async/await是一种基于Promise的异步编程解决方案。 在给定的引用中，我们可以看到使用了async和await关键字来处理异步请求。在方法二中，使用async关键字声明一个异步函数，并使用await关键字等待异步操作完成。在方法三中，也使用了async关键字来定义一个异步函数，通过await等待异步请求的完成。 总的来说，ajax promise async/await是一种用于处理异步操作的解决方案，通过使用Promise和async/await关键字可以更方便地处理异步请求并获取返回结果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [深入掌握Ajax + Promise + Async + await 异步解决方案](https://blog.csdn.net/qq_47969241/article/details/120525361)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [ES6 - promise 与 async / await【Promise 封装丐版 Ajax】](https://blog.csdn.net/weixin_63836026/article/details/126301083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值