es6异步解决方案小白指南_异步使用教程

es6异步解决方案小白指南

最初使用回调函数

​ 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用。

es6异步解决方案小白指南_异步使用教程

​ 但是node中有明确的规范

​ node中的的回调模式:

es6 异步处理模型

Es6 出现以后, 官方就提出了异步处理的规范, 提出了一种适用于所有异步场景的处理模型。该模型有:

任务已决状态后可能需要后续处理,

为该异步模型量身打造的API : promise

如何使用promise

Copyconst task = new Promise((resolve, reject) => {     
    // 任务未决阶段代码  
    // 立即执行  
    console.log("开始100米长跑");  
    setTimeout(() => {  
       if (Math.random() > 0.5) {  
           // 成功: 跑完了  
           // 推向成功  
           resolve("跑完了");  
       } else {  
           // 失败: 腿摔断了  
           // 推向失败  
           reject("腿摔断了");  
       }  
    }, 1000)
});
task.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
})

1s 后任务推向已决, 后续处理在then 或者 catch中 处理。

注意

pending状态 =》rejected状态 :

Copy1. 调用reject
2. 代码执行报错
3. 手动抛出错误

后续处理函数一定是异步的,且会放到微队列中,

j s执行栈清空后会先执行微队列中的任务,微队列里任务清空后才会执行宏队列中的任务。

Async await 是es7新增的promise的语法糖大家也可以了解下,本文只是对promise做了个概述,

要掌握的其他细节还有很多

海计划公众号
(0)
上一篇 2020/03/20 04:05
下一篇 2020/03/20 04:05

您可能感兴趣的内容

  • ES6入门之Promise对象基础教程_Promise基础教程

    1. Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件更合理、更强大。 1.1 什么是Promise简单来说就是一个容器,里面保存着某个未来才会结束的事件(也就是异步操作)的结果。从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息,它提供统一的API,各种异步操作都可以用同样的方法进行处理。

    2020/03/24
  • freshdesign小白帮助_MG动态效果展示

    freshdesign小白帮助 官方网址:https://freshdesign.io/ 简介描述:MG动态效果展示 MG动画的表现形式大致可以分为三大类:人物MG,二维图形MG,…

    2020/03/10
  • js变量提升的坑入门攻略_变量菜鸟攻略

    变量提升在js函数内部是可以直接修改全局的变量的,个人感觉是不好的设计, 但是确实存在这个概念原理:先查看有没有函数变量bb查看形参有没有bb查看全局有没有bb报错, 找不到bb变量修改函数内部var bb = 1;function foo(cc){var bb = 2; // 这里的bb, 其实是函数的局部变量console.log(cc);
    }foo(b

    2020/03/23
  • 什么是BFC? CSS 如何使用伪元素清除浮动?小白知识_浮动指南攻略

    BFC概念:块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不

    2020/03/30
  • PHP框架中JS优雅获取模板变量的方式菜鸟教程_模板攻略教程

    在使用PHP框架(本文以ThinkPHP为例)进行页面开发的时候,经常遇到需要将控制器方法中的模板变量代入到页面JS内操作的情况,常见的方式如: let admin={:json_encode($admin)}, //$admin是php数组level={$level}; console.log(admin, level); 这种方式确实是可以取到值

    2020/03/23
  • 常见Python的Web开发框架菜鸟教程下载_Python小白知识

    常见Python的Web开发框架菜鸟教程下载 在今天,Python里有很多开发框架用来帮助你轻松创建web应用。web开发框架存在的意义就在于可以快速便捷的构建应用,而不用去在意那…

    2020/03/20
  • 什么是CDN缓存?CDN的入门了解小白入门_CDN入门百科

    前言这段时间,在工作中遇到了一个CDN导致的图片资源加载的错误,在排查问题的过程中,发现自己对CDN的了解非常的片面,仅仅停留在它能缓存静态资源,提升访问速度的了解中。所以觉得还是非常有必要深入去了解下。什么是CDN?CDN的全称是Content Delivery Network,即内容分发网络,是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的

    2020/04/05
  • mo.js入门基础_强大的JavaScript动画图形,一个svg图形库

    mo.js新手入门 官方网址:http://mojs.io/ GitHub:https://github.com/legomushroom/mojs 简介描述:强大的JavaScr…

    2020/03/06
  • js判断参数是否为非0整数数字或者整数数字字符串的简单方法(小装逼)小白教程_js技巧小白常识

    我们来判断一个值是否为数字,可以把它转化为数字,看是否为NaN 然后,再判断是否等于0即可简单的来实现判断了。所以,代码如下(num) => {if (!isNaN(parseInt(num))){if (num !== 0) {// do something}}
    }逻辑非常清楚。但是有点冗余。其实 isNaN 对于非数字的输出都是 true ,所以,代码可

    2020/04/03
  • Js中setTimeout()、setInterval()、链式setTimeout()入门基础知识_定时器菜鸟知识

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的线程来执行。实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。有

    2020/03/24
  • 刚学web前端的学习路线小白知识_学习入门知识

    本人从事前端多年,这里为大家普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇学习路线文章一、HTML、CSS基础、JavaScript语法基础。学完基础后,可以仿照电商网站(例如京东、小米)做首页的布局。二、JavaScript语法进阶。包括:作用域和闭包、this和对象原型等。相信我,JS语法,永远是面试中最重要的部分。三、jQ

    2020/03/29
  • 宅客学院菜鸟指南IT职业教育线上品牌,课程涵盖大数据、前端开发、后端开发等,免费课程挺多的。

    宅客学院入门指南 官方网址:http://www.zhaikexueyuan.com/ 简介描述:IT职业教育线上品牌,课程涵盖大数据、前端开发、后端开发等,免费课程挺多的。

    2020/03/06
  • 一个老程序员对自己当前编程技术处在哪个水平的反思使用帮助_编程小白帮助

    编程界公认的,经典的程序员修炼进阶模型,这个模型给程序员定义的4重境界:无意识无能力——不知道自己不知道有意识无能力——知道自己不知道有意识有能力——知道自己知道无意识有能力——不知道自己知道1 无意识无能力在校大学生,或是工作刚一年的编程新手所处的阶段,年少轻狂,激情四射,学习编程新知识超级有干劲,当自己按照教程编写出一些应用,学会使用一些框架,研究了一些

    2020/04/03
  • webpack 从入门到放弃小白攻略_webpack小白帮助

    随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突文件依赖代码复用模块化,会将相关的代码封装成一个package包的文件,当需要的时候,直接拿来用即可(import引入)。至于相关文件的直接依赖如何处理,webpack会帮我们解决这个问题。那么模块化应该使用什么样的规

    2020/03/26
  • JS箭头函数用处/示例指南教程_函数入门基础

    在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:更简短的函数;更直观的作用域和this的绑定(不绑定this)因为这些优点,箭头函数比起其他形式的函数声明更受欢迎。比如,受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。然而,箭头函数有优点,也有一些“缺点

    2020/03/29
  • Js闭包有什么用?使用帮助_闭包使用指南

    “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。JavaScript闭包详解看下面这段代码:func

    2020/03/20