await等候,等待;期待

什么是async、awaitawait 用于等待异步完成通常async、await都是跟随Promise一起使用的

async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象

  1. async function testSync() {
  2. const response = await new Promise(resolve => {
  3. setTimeout(() => {
  4. resolve("async await test...");
  5. }, 1000);
  6. });
  7. console.log(response);
  8. }
  9. testSync();//async await test...
  1. async function asyncAwaitFn(str) {
  2. return await new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(str)
  5. }, 1000);
  6. })
  7. }
  8. const serialFn = async () => { //串行执行
  9. console.time('serialFn')
  10. console.log(await asyncAwaitFn('string 1'));
  11. console.log(await asyncAwaitFn('string 2'));
  12. console.timeEnd('serialFn')
  13. }
  14. serialFn();
  1. async function asyncAwaitFn(str) {
  2. return await new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(str)
  5. }, 1000);
  6. })
  7. }
  8. const parallel = async () => { //并行执行
  9. console.time('parallel')
  10. const parallelOne = asyncAwaitFn('string 1');
  11. const parallelTwo = asyncAwaitFn('string 2')
  12. //直接打印
  13. console.log(await parallelOne)
  14. console.log(await parallelTwo)
  15. console.timeEnd('parallel')
  16. }
  17. parallel()

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。表达式一个 Promise 对象或者任何要等待的值。返回值返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function。

若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。

另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。

  1. function resolveAfter2Seconds(x) {
  2. return new Promise(resolve => {
  3. setTimeout(() => {
  4. resolve(x);
  5. }, 2000);
  6. });
  7. }
  8. async function f1() {
  9. var x = await resolveAfter2Seconds(10);
  10. console.log(x); // 10
  11. }
  12. f1();
  1. async function f2() {
  2. var y = await 20;
  3. console.log(y); // 20
  4. }
  5. f2();
  1. async function f3() {
  2. try {
  3. var z = await Promise.reject(30);
  4. } catch (e) {
  5. console.log(e); // 30
  6. }
  7. }
  8. f3();

setTimeout,Promise,async/await的区别?

async/await

async/ await来发送异步请求,从服务端获取数据

async的用法它作为一个关键字放到函数前面,用于表示函数是一个异步函数

  1. async function timeout() {
  2.   return 'hello world';
  3. }
  1. async function timeout() {
  2. return 'hello world'
  3. }
  4. timeout();
  5. console.log('虽然在后面,但是我先执行');

  1. async function timeout() {
  2. return 'hello world'
  3. }
  4. timeout().then(result => {
  5. console.log(result);
  6. })
  7. console.log('虽然在后面,但是我先执行');

控制台中的Promise 有一个resolved,这是async 函数内部的实现原理。

返回一个值当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回

函数内部抛出错误就会调用Promise.reject() 返回一个promise 对象

  1. async function timeout(flag) {
  2. if (flag) {
  3. return 'hello world'
  4. } else {
  5. throw 'my god, failure'
  6. }
  7. }
  8. console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
  9. console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

如果函数内部抛出错误, promise 对象有一个catch 方法进行捕获。

  1. timeout(false).catch(err => {
  2. console.log(err)
  3. })

await是等待的意思它后面跟着什么呢?

注意await 关键字只能放到async 函数里面

更多的是放一个返回promise 对象的表达式

  1. // 2s 之后返回双倍的值
  2. function doubleAfter2seconds(num) {
  3. return new Promise((resolve, reject) => {
  4. setTimeout(() => {
  5. resolve(2 * num)
  6. }, 2000);
  7. } )
  8. }
  1. async function testResult() {
  2. let result = await doubleAfter2seconds(30);
  3. console.log(result);
  4. }

  1. const express = require('express');
  2. const app = express();// express.static 提供静态文件,就是html, css, js 文件
  3. app.use(express.static('public'));
  4. app.listen(3000, () => {
  5. console.log('server start');
  6. })

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

uni-app 项目记录的更多相关文章

  1. eclipse Maven 使用记录 ------ 建立app项目

    maven 项目构建工具 , 如今已逐渐取代ant的笨拙配置方式 ,使项目管理更加简单,规范,结构更加清晰,这里记录跟eclipse集成的一些步骤  1.从apache maven项目下下载maven ...

  2. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  3. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  4. 移动APP项目研发流程及版本规划(转)

    一个移动APP项目研发规模可大可小,但都离不开以下几个成员:产品经理.ui设计师.前端开发.后端开发.测试等.如何合理安排项目成员工作.确保项目顺利进行呢?一个清晰合理的项目研发流程控制很重要. 项目 ...

  5. 用户识别APP项目开发计划书

    用户识别APP项目开发计划书        项目介绍: 用户识别APP,通过在有限时间内引导用户A交互,提取用户的行为特征,然后将APP交给用户X(可能是A也可能是陌生人),在1分钟内引导X交互,判断 ...

  6. IOS客户端Coding项目记录导航

    IOS客户端Coding项目记录(一) a:UITextField设置出现清除按键 b:绘画一条下划线  表格一些设置 c:可以定义表头跟底部视图(代码接上面) d:隐藏本页的导航栏 e:UIEdge ...

  7. Unity Project Wizard (最近打开的项目记录)

    最近打开工程列表 当用Unity打开过的项目越来越多之后,在最近打开项目记录框中就会变的很长,那么如何才能删除最近打开的记录呢? Unity4.x最近打开的工程记录 Unity5.x最近打开的工程记录 ...

  8. 到底为什么你的APP项目烂尾了?

    你正在经历迷茫.纠结,或者愤怒.痛苦的情绪,因为,你的APP项目已经或将要烂尾了. 目前的状况只有3种: 项目一直拖到现在,并且很可能继续拖下去 项目在开发期间不断上涨成本 项目完成,BUG多多,不能 ...

  9. 第一次,触碰Web App项目,栽过的那些坑。

    此项目是一个IPad上的Web App项目,页面的滚动用了最新的IScroll 5.0 插件, 确实是挺潮的. 项目用时 1个月 完成的, 准备今天晚上上线. 这是年前的最后一篇文章了,与众位博友分享 ...

  10. App项目升级Xcode7&iOS9(续) - This bundle is invalid. The bundle identifier contains disallowed characters

    金田 iOS 9发布已经有2月有余,现在Xcode已经有升级到Xcode7.1,开发环境安装等一系列相关的流程,以及Xcode 7 & iOS 9升级相关的一些部分,在这里就不再多加赘述(详见 ...

随机推荐

  1. CKEditor 4 上传视频

    参考资料:CKEditor添加Video视频插件 HTML5 video 记得配置插件以及上传地址,不知道哪一个是上传视频的地址参数,我也没有试,因为我有上传图片的功能,所以这三个参数我都设置了. / ...

  2. APS.NET MVC + EF (03)---初始MVC

    3.1 MVC简介 MVC(Model-View-Controller,模型—视图—控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(C ...

  3. Java之路---Day12(多态)

    2019-10-26-22:40:09 目录: 1.多态的概念 2.多态的分类 3.实现多态的三个必要条件 4.多态的格式 5.多态成员变量的使用特点 6.多态成员方法的使用特点 7.多态的好处 8. ...

  4. Matlab中介者模式

    中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性.这种模式提供了一个中介类,该类通常处理不同类之间的通信,并支持松耦合,使代码易于维护.想象一个乱糟糟的开发小组的工 ...

  5. echarts自定义悬浮框的显示

    最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...

  6. TP5日志打印方法封装

    需求:在开发及测试过程中需要打印日志,并且可以将日志内容打印到指定文件,这样方便查看. 过程: 1. 打开think\Log文件,在该文件中添加一个静态方法,代码如下: /** * @param $m ...

  7. es聚合后排序

    注意: es版本至少6.1以上 语句: GET 76/sessions/_search { "size": 0, "query": { "bool&q ...

  8. SpringCloud学习第二章-SpringBoot

    SpringCloud 学习前提     SpringCloud是基于SpringBoot构建的,因此他延续了SpringBoot的契约模式以及开发方式.下面将讲到SpringBoot的构建方式. S ...

  9. Ansible-概念

    控住节点 任何装有Ansible的机器.您可以从任何控制节点调用/usr/bin/ansible或来运行命令和剧本/usr/bin/ansible-playbook.您可以将任何安装了Python的计 ...

  10. 202. 快乐数.Set去重作用实际作用

    编写一个算法来判断一个数是不是“快乐数”. 一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,也可能是无限循环但始终变不到 1.如 ...