ES6异步方案实现

ES6之前的异步方案参考ES5异步机制

一、为什么需要异步处理?

1、异步与同步概念和区别
同步:多个线程执行时,当一个线程执行时,其它线程会阻塞,等待当前线程执行完毕。
异步:多个线程执行时,当一个线程执行时,其它线程同时执行,互不影响。
2、什么情况下需要异步处理
IO处理,网络请求等耗时操作。

二、回调地狱

1、回调函数
2、回调地狱

三、异步最佳实践——Promise

1、基本介绍
Promise 对象用于表示一个异步操作的最终状态(完成或失败),Promise在回调代码和将要执行这个任务的异步代码之间提供了一种可靠的中间机制来管理回调。

本质上Promise就是一个构造函数。

2、基本语法

new Promise( function(resolve, reject) {...});  //第一个参数一般我们称为executor

//实例
var promise = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

参数说明
Executor :( 同步回调函数)
executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数,在实例对象被返回前。resolve 和 reject 两个函数作为参数传递给executor。resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。executor 内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled,或者在发生错误时调用reject函数将它的状态改为rejected。如果在executor函数中抛出一个错误,那么该promise 状态为rejected。executor函数的返回值被忽略。

3、快速入门案例

<script>
    /*Promise异步处理:用同步的编码方式处理异步代码  可以解决回调地狱  有利于业务逻辑的梳理
    优点:传递数据方便
    缺点:没有摆脱回调*/
    // 基本语法
    var promise = new Promise(function (resolve, reject) {
        setTimeout(function (flag) {
            if (flag) {
                console.log("success-1");
                resolve();
            } else {
                console.log("error-1");
                reject();
            }
        }, 1000, true)
    });
    promise
        .then(function () {
            return new Promise(function (resolve, reject) {
                setTimeout(function (flag) {
                    if (flag) {
                        console.log("success-2");
                        resolve();
                    } else {
                        console.log("error-2");
                        reject();
                    }
                }, 1000, true)
            })

        })
        .then(function () {
            return new Promise(function () {
                setTimeout(function (flag) {
                    if (flag) {
                        console.log("success-3");

                    } else {
                        console.log("error-3");

                    }
                }, 1000, true)
            })
        });
script>

四、异步最佳实践——generator

<script>
    //test:迭代器函数
    function * test() {
        yield  setTimeout(function (flag) {
                    if(flag){
                        console.log("success-1");
                        it.next();
                    }else{
                        console.log("error-1")
                    }
                 },1000,true);

        yield setTimeout(function (flag) {
                    if(flag){
                        console.log("success-2");
                        it.next();
                    }else{
                        console.log("error-2")
                    }
                },1000,true);

        yield setTimeout(function (flag) {
            if(flag){
                console.log("success-3")
            }else{
                console.log("error-3")
            }
        },1000,true);
    }
    var it = test();
    it.next();


script>

五、异步最佳实践——async&await

1、基本介绍
正常函数前加一个async关键字后,该函数就被定义成了一个async函数。
当调用一个 async 函数时,会返回一个 Promise 对象。

当这个 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;
当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值。
2、await
await 操作符用于等待一个Promise 对象。它只能在async function 中使用。
await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。

  • 若 Promise 正常处理(fulfilled),!!其回调的resolve函数参数作为 await 表达式的值!!,继续执行
    async function。

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

3、Async function test(){}
Await与yield类似,await等的是promise,当promise状态确定之后就会指向下一个流程。

4、数据传递机制:
Promise数据传递机制

5、快速入门案例


                    
                    

你可能感兴趣的:(ES6异步方案实现)