ES8新特性_async和await结合发送ajax请求---JavaScript_ECMAScript_ES6-ES11新特性工作笔记051

最新推荐文章于 2023-07-22 11:16:09 发布
最新推荐文章于 2023-07-22 11:16:09 发布
阅读量600 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/113487115
本文介绍了如何使用ES8的async和await进行异步编程，通过实例展示了如何结合发送AJAX请求，对比传统Promise的写法，阐述了async/await的便捷性。同时提到了Axios库，它是一个基于Promise的HTTP库，适用于浏览器和Node.js，提供了拦截、转换请求等特性。

然后我们再来写个例子,使用es8,中提供的异步编程

工具,async,await来实现发送ajax请求 

我们上面先写一个原来的对ajax请求的一个写法,不使用jquery的,使用原生JavaScript来写.

然后我们在外层用promise对象包裹住.

然后可以看到如果成功了,我们promise对象返回resolve并且把x.response,传递出去

如果失败了就把错误码,错误状态传递出去reject(x.status);

然后我们去测试,

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ES8新特性_async和await结合使用读取文件内容---JavaScript_ECMAScript_ES6-ES11新特性工作笔记050
添柴程序猿的专栏
01-31 472
然后我们再来看看,我们用async和await,es8中提供的新特性,来结合使用读取文件 首先我引入fs文件系统模块 然后写个函数,读取文件 注意这里我们返回一个promise对象 然后在箭头函数中,调用readFile 然后if(err) reject(err);如果出错,就调用reject表示出错 否则的话成功调用resolve(data); 然后我们再把插秧诗和观书有感,这两首诗,写好. 然后我们再写一个 async的函数,main,在这里面 我们就可以,通过awai.
ES8新特性_await表达式---JavaScript_ECMAScript_ES6-ES11新特性工作笔记049
添柴程序猿的专栏
01-31 454
然后我们再看一下es8中提供的await用法 1.首先await,必须要放在async修饰的函数中使用. 2.然后上面我们首先声明了一个promise对象,返回resolve(),表示成功 然后我们在main这个函数,中得到这个promise对象,然后打印了一下. 下面是 main();函数的调用,我们可以看到右边 这个时候,成功获取了我们自己声明的promise对象的成功的数据. 然后如果我们promise对象返回的是失败呢? 这个时候注意,可以看到右侧,报错了对吧. ...
使用async与await封装ajax请求
黑眼圈
12-02 919
封装ajax 的es6升级版 <!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&
async+await：发送Ajax请求
席木木的博客
07-17 3205
async关键字用于修饰函数，async函数的返回值为Promise对象，await表达式可以将Promise对象转换为普通JavaScript类型，并取出Promise对象状态为成功时的返回结果值。
【精讲】async，await简介及与Ajax合用案例（内含面试内容）
m0_59505309的博客
07-20 1216
【精讲】async，await简介及与Ajax合用案例（内含面试内容）
async与await封装AJAX请求
qq_39181017的博客
07-06 270
代码：：： <!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" /> <
Ajax基础入门(day4) - async 和 await
JOUKELOVE的博客
09-04 624
一、async 和 await 二、事件循环队列 - 宏任务微任务 三、案例 - 个人设置
精选资源
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
从ES6（ECMAScript 2015）到ES11（ECMAScript 2020），JavaScript引入了一系列的新特性，极大地提升了代码的可读性和效率。本篇文章将深入探讨这些重要的语法更新。 一、箭头函数 ES6引入了箭头函数，其语法简洁...
精选资源
ECMAScript-new-features-list：ES新功能的完整列表，包括ES2015（ES6），ES2016，ES2017，ES2018，ES2019
02-03
ECMAScript，通常简称为ES，是JavaScript语言的标准化规范，由ECMA国际制定并维护。自2015年开始，每年都会发布新的版本，带来了许多改进和新特性，极大地扩展了JavaScript的功能和表现力。以下是对每个指定年份版本...
es6 ajax async,ES6 async await(示例代码)
weixin_36262567的博客
08-06 194
1 2 3 4 5 async-await6 7 8 ES6 async 函数用法910 1112 window.onload= function() {1314 //例-1: 继发异步15 asyncfunctionf() {16 try{17 let a=awaitnewPromise((resolve, ...
async与await结合发送AJAX请求小案例
czj1049561601的博客
02-28 1172
为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！ async函数与await函数基本原理介绍 https://blog.youkuaiyun.com/czj1049561601/article/details/114238733 案例内容： 通过点击屏幕上的按钮来过去接口中的笑话，并进行打印！ 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
ES6--async函数
吴声子夜歌的博客
10-17 635
async async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。 语法 async function name([param[, param[, ... param]]]) { statements } name: 函数名称。 param: 要传递给函数的参数的名称。 statements: 函数体语句。 返回值 async 函数返...
$.ajax
a15180180753的博客
05-31 249
$.ajax()方法详解jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时...
es6 ajax 执行顺序,用ES6的新特性 async + await进行ajax的异步操作
weixin_39531183的博客
08-06 437
在js中我们经常要使用到ajax操作在前台获取到前台的数据，使用一个ajax倒好说，要是使用多个而且是后一个获取前一个的结果才能进行下一个的这种就需要多级嵌套，很是麻烦，下面我就来讲一下如何使用ES6的新特性async await进行异步处理，使上述情况就好像写同步代码一样，首先我们先举个例子：先写上json文件:code.jsonperson.json比如我们两个请求先获取code.json中的...
Web前端之JavaScript同步循环请求接口、发送Ajax、获取、toString、Promise、resolve、random、reject、async、await、split、then
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
06-09 1968
Web前端之JavaScript同步循环请求接口、发送Ajax、获取、toString、Promise、resolve、random、reject、async、await、split、then
【通俗易懂】手把手进行ES6异步编程： Generator + Promise = JavaScript强大的异步回调方式
Daivon_Up的博客
07-24 925
概念 Generator 函数是 ES6 提供的一种异步编程解决方案，执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 yield表达式 形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function...
es6 ajax async,ES6（异步操作和Async函数&&await）
weixin_31119449的博客
08-05 360
async 是“异步”的简写，比如Ajax中就有这个代表异步请求；而 await 可以认为是 async wait 的简写，因为await只能出现在async函数中的语法规定。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。一.async到底是个什么东西async 函数返回的是一个 Promise 对象。async 函数(包含函...
es6 ajax async,ES6异步实现的三种方式：Callback/Promise/Async&Await
weixin_35756690的博客
08-06 454
1.利用callback函数回调函数，可以理解成作为参数传递的函数对象。什么是callback函数下面举个使用回调函数的栗子：$("#myDiv").on("click", function () {this.innerHTML = "you clicked me!";});这个栗子中，我们使用 jQuery 给一个 id 为 myDiv 的元素绑定了 click 事件的处理程序，这里的事件处理程...
ajax+异步promise+async+await
weixin_52310583的博客
07-22 292
总之，除非Promise.then()方法内部抛出异常或者是明确置为rejected态，否则它返回的Promise的状态都是fulfilled态，即完成态，并且它的状态不受它的上一级的状态的影响。语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,再执行下一个任务)。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。ajax=异步js+xml，ajax实现客户端和服务端进行异步通信，实现页面的局部更新。
ECMAScript 新特性解析：从ES6到ES11的JavaScript进化
标题“ajs:很棒的javascript”暗示了讨论主题将集中于...在“ajs”（Awesome JavaScript）的环境中，这样的文件通常包含了众多ES新特性实现的示例、工具函数和应用程序，是学习和应用现代JavaScript的极佳资源。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

添柴程序猿

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

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

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

打赏作者

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

抵扣说明：

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

余额充值