Ajax,Promise,Async await的使用

最新推荐文章于 2024-06-23 11:29:02 发布
最新推荐文章于 2024-06-23 11:29:02 发布
阅读量273 收藏
点赞数
文章标签： ajax javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40790248/article/details/124832623
版权

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

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

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

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

AJAX 异步实现步骤：

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


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

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

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

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

 

Async await

 

 

 

 

 

weixin_40790248
关注
前端：一篇彻底搞懂基于PROMISE的使用(AJAX,FETCH,AXIOS,ASYNC/AWAIT)
GIS摆渡人
04-29 466
文章目录一 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 591
ES6笔记————promise创建，封装ajax，async与await
Promise、async/await和Promise封装ajax
azkhx的博客
09-07 452
Promise、async/await和Promise封装ajax
【ajax核心04】利用async、await解决显式promise链问题
最新发布
大前端开发工程师、互联网方向创业者
06-23 507
async与await解决现实promise链调用问题、try...catch语句执行错误信息捕获
深入掌握Ajax + Promise + Async + await 异步解决方案
qq_47969241的博客
09-28 990
随着前端技术的不断更替，Ajax在整个JavaScript以及整个前端发展史都占据非常重要的地位，那么什么是Ajax? AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术，并不是一个新的编程语言喔！它是属于JavaScript网络请求模块的一部分。 传统回调函数会造成回调地域问题，类似不同的异步函数相互嵌套，导致加重寻找bug的难度和代码的美观度的减少。 那么这一次我们就来做一次对Ajax使用的深入透析。 首先我们先来看看我们的文件目录: json文件夹下有个静...
Promise+ajax && async+await+promise+ajax
MorningDuGe
07-08 700
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 1000
同步和异步 什么是同步 意思大概就是执行完一步后再执行下一步（执行队列依次执行），如： 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
promise、async和await
zy_lalala的博客
05-01 5741
promise JavaScript是单线程 因为js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 异步任务 但这样很容易造成阻塞，所以把任务分成了同步任务和异步任务两种，异步模式可以同时执行多个异步任务，当主线程遇到异步任务，就把异步任务放进’任务队列’里，执行完同步任务后，再循环的去检查任务队列里面有哪些异步任务要执行， 回调函数 在没有promise前，使用的是回调函数的方式来执行异步任务，就是当主线程开始执行这个异步任务时，就去执行这个异步任务对应的回调函数。 异步任务比如：ajax
前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await
成长的嘻嘻哥
04-26 739
前端异步请求从 原生js的xmlhttprequest 到 jquery的ajax 到 es6的promise 到 es7的async/await，一整套流程
原生ajax的封装以及结合promise和async/await的使用
qq_19652407的博客
11-12 671
错误封装原生ajax导致无法获取请求结果 一. 前奏——了解ajax文档 ajax文档地址 XMLHttpRequest 的实例对象拥有： 两个请求方法：open(method,url,async)，send(string)； 两种响应字段：responseText（字符串形式），responseXML（xml形式） 三个属性：onreadystatechange（实例状态改变调用的函数），readyState（实例状态），status（状态） 二、错误封装原生ajax ...
ajax promise async/await
08-30
总的来说，ajax promise async/await是一种用于处理异步操作的解决方案，通过使用Promise和async/await关键字可以更方便地处理异步请求并获取返回结果。<span class="em">1</span><span class="em">2</span><span ...
从ajax到promise到async await
luo_1010的博客
06-28 953
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 1104
为熟悉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 3056
async关键字用于修饰函数，async函数的返回值为Promise对象，await表达式可以将Promise对象转换为普通JavaScript类型，并取出Promise对象状态为成功时的返回结果值。
async和await方式 实现 ajax
qq_56042698的博客
01-02 546
promise async、await ajax
使用await/async函数代替jquery的ajax函数
缪子龙的博客
08-15 5291
其实在10年前,我读大学的期间,感觉jquery的ajax太好用了,但是随着时代的发展,JS的坑点越来越明显,其中一点就是地狱回调的问题,好在es7中提出了await/async函数 本文将jquery中的ajax转化成使用await/async函数的使用方式 首先需要定义一个函数,用于返回Promise类型的对象,接着需要使用resolve和reject函数用于异步处理结果 func...
AJAX ---- 4 async 和 await 使用
love33441314520的博客
08-16 439
逐行执行，需原地等待结果后，才继续向下执行异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数。
ajax 请求 回调,Ajax请求回调地狱及解决方案（promise、async和await）
weixin_34603379的博客
08-05 1295
谈及回调地狱发生得情况和解决办法，就必须追溯到原生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 1140
<!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.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值