第二十九节: ES6 generator 与 Promise

作者: 时光如剑 | 来源:发表于2020-10-31 20:03 被阅读0次

第二十九节: ES6 generator 与 Promise
第二十九节: ES6 generator 与 Promise
一次性搞懂 Promise、async await 与 Gene
JS新特性
ES6 知识点整理
JS异步编程(4)-Generator
JS中的异步操作
Generator
es6 异步编程之 Promise 从认识到使用
ES6 - Promise, Generator, async

1. Promise 承诺,许诺

1.1. 概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

所以Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

1.2. 特点

promise对象的状态不受外界影响。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

1.3. 状态

Promise对象代表一个异步操作，有三种状态：

pending（进行中）、此时操作尚未完成
fulfilled(resolve)（已成功）异步操作成功
rejected(reject)（已失败）。异步操作失败

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

1.4.缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

1.5.用法

1.5.1 Promise基本语法

let promise = new Promise(function(resolve,reject){
// resolve 成功后调用
// reject 失败后调用
})

promise.then(res => {

},err => {

})

var a = 10;
let promise = new Promise(function(resolve,reject){
    // resolve  成功后调用
    // reject   失败后调用
    if(a == 10){
        resolve("成功");
    }else{
        reject("失败");
    }
})
// promise.then(success, fail)
promise.then((res) => {
    console.log(res);
},err => {
    console.log(err);
})

ajax请求

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    success: function (data) {
        console.log(data)
    }
})
console.log(22)

当然，可以使用callback，但是callback使用起来是一件很让人绝望的事情。

这时：Promise这个为异步编程而生的对象站了出来....

new Promise((res, rej) => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        success: function (data) {

            // console.log(data)
            res(data);
        },
        error: function () {
            rej()
        }
    })

})
    .then((data) => {
    console.log(data)
    return new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function (data) {
                res(data)
            },
            error: function () {
                rej()
            }
        })
    })
})

1.5.2 then方法

ps: 如果一个对象实现了then方法, 这个对象就被称之为thenable 对象, 所有的promise对象都是thenable对象, 但是并非所有的thenable对象都是promise

promise的then返回值还是一个promise对象,多以可以连点使用

promise.then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

可以如上使用,then方法里的参数为成功后执行,catch方法里的参数为失败后执行

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

也就是说，状态由实例化时的参数（函数）执行来决定的，根据不同的状态，看看需要走then的第一个参数还是第二个。

resolve()和reject()的参数会传递到对应的回调函数的data或err

then返回的是一个新的Promise实例，也就是说可以继续then

1.6. catch()

.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

promise身上有一个catch来捕获错误

promise.catch(err => {
console.log(err);
})

// 其实就是then方法里的第二个参数

var a = 10;
let promise = new Promise(function(resolve,reject){
    // resolve  成功后调用
    // reject   失败后调用
    if(a == 10){
        resolve("成功");
    }else{
        reject("失败");
    }
})
// promise.then(success, fail)
promise.then(res => {
    console.log(res);
},err => {
    console.log(err);
})

// 捕获错误
promise.catch(err => {
    console.log(err);
})

1.7. 链式操作的用法

所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

new Promise((res, rej) => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos/1',
        success: function (data) {

            // console.log(data)
            res(data);
        },
        error: function () {
            rej()
        }
    })

})
    .then((data) => {
    console.log(data)
    return new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function (data) {
                res(data)
            },
            error: function () {
                rej()
            }
        })
    })
})
    .then((data) => {
    console.log(data);
    return new Promise((res,rej)=>{
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/posts',
            success: function (data) {
                console.log(data)
            }
        })
    })
})

1.8. resolve与reject方法

1.8.1 Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。

const jsPromise = Promise.resolve('123');

上面代码将123转为一个 Promise 对象。

Promise.resolve等价于下面的写法。

Promise.resolve('123')
// 等价于
new Promise(resolve => resolve('123'))

Promise.resolve方法的参数分成四种情况。

参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
```
Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});
```
上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。

3.参数不是具有then方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。

不带有任何参数

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。

const p = Promise.resolve();

p.then(function () {
  // ...
});

上面代码的变量p就是一个 Promise 对象。

1.8.2 Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

   const p = Promise.reject('出错了');
   // 等同于
   const p = new Promise((resolve, reject) => reject('出错了'))
   
   p.then(null, function (s) {
     console.log(s)
   });
   // 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

   const thenable = {
     then(resolve, reject) {
       reject('出错了');
     }
   };
   
   Promise.reject(thenable)
   .catch(e => {
     console.log(e === thenable)
   })
   // true

上面代码中，Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。

1.9. Promise.all()

promise的all 方法

all()方法的参数都是promise对象

Promise.all([p1,p2,p3])

把promise打包,扔到一个数组里面,打包完还是一个promise对象

如果是all方法,必须确保,所有的promise对象,都是resolve状态,都是成功的状态,否则就报错

let p1 = Promise.resolve("p1成功");

let p2 = Promise.resolve("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1,p2,p3里面的resolve组成的数组
   let [res1,res2,res3] = res;
    console.log(res1,res2,res3);
});

// 如果p2是reject
let p1 = Promise.resolve("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.all([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1,p2,p3里面的resolve组成的数组
   let [res1,res2,res3] = res;
    console.log(res1,res2,res3);
});
// 居然报错了

1.10 Promise.race()

promise的race的方法

Promise.race([p1,p2,p3])

这个和all用法一样,唯一不同之处就是race方法只要最前面一个resolve就可以正常执行,如果排在前面的是reject就报错

let p1 = Promise.resolve("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.race([p1,p2,p3]).then(res => {
    console.log(res);   // 这里的res是一个有p1里面的第一个resolve值
});

如果全部都是reject

let p1 = Promise.reject("p1成功");

let p2 = Promise.reject("p2成功");

let p3 = Promise.resolve("p3成功");

Promise.race([p1,p2,p3]).then(res => {
    console.log(res);   // 因为第一个是reject,所以报错
});

race的方法作用

可以利用race方法的作用来判断超时处理

// 异步处理函数
function foo() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(20)
        }, 3000)
    })
}

// 封装超时函数
function timeoutPromise(delay) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('超时')
        }, delay)
    })
}


Promise.race([
    foo(),
    timeoutPromise(1000)
]).then(function (res) {
    console.log('res', res)
}, function (err) {
    console.log('err', err)
})

2.generator 生成器

2.1. 基本概念

Generator 生成器是ESMAScript6 一个重要的特性

执行 Generator 函数会返回一个迭代器对象，也就是说，Generator 函数还是一个迭代器对象生成函数。返回的迭代器对象，可以依次遍历 Generator 函数内部的每一个状态。

生成器,也是一个函数,

2.1.1 跟普通函数的区别

function关键字与函数名之间有一个星号；
函数体内部使用yield表达式，定义不同的内部状态。
Generator函数不能跟new一起使用，会报错。

2.2 generator 的基本使用;

2.2.1 定义generator函数

在function关键字和函数名中间加一个* 号就表示这是一个generator函数

function * show(){
    yield 语句; 
    yield 语句; 
}

ES6 没有规定，function关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过。这里至于*号两边有没有空格无所谓

2.2.2 generator函数调用:

let g1 = show();
g1.next();
g1.next();
g1.next();

例子:

function * show(){
    yield "hello";
    yield "world";
    return 'wuwei';
}
let g1 = show();   // generator函数加括号执行返回一个Generator对象
console.log(g1);   // show {<suspended>}

console.log(g1.next()); // {value: "hello", done: false}
// generator对象身上有一个next方法,执行后返回一个对象,对象里是一个yield的值和done属性,done属性为false,表示还没有执行完,后面还有内容,true表示执行完毕

console.log(g1.next()); // {value: "world", done: false}
console.log(g1.next()); // {value: "wuwei", done: true}

console.log(g1.next()); // {value: undefined, done: true}
// 当done第一次为true是表示generator里面内容执行完毕,如果还继续调用next方法,返回值为undefined,done依然为true,告诉你执行完毕了

2.2.3 generator函数批量处理yield

function * show(arr){
    for(let i = 0; i< arr.length; i++){
        yield arr[i]
    }
}

注意 yield 关键字只能在生成器generator函数中使用,否则会报错,

如下写法

// 报错写法
function * show(arr){
    arr.forEach(function(item, index){
        yield item
    })
}

2.2.4 generator函数表达式

除了可以通过函数声明的方式创建生成器函数, 也可以通过函数表达式创建generator生成器

var show = function * (arr){
    for(let i = 0; i< arr.length; i++){
        yield arr[i]
    }
}

此时因为是匿名函数表达式, 所以*在function 关键字和小括号之间

注意:不能通过箭头函数创建生成器

2.3 generator不同的调用

2.3.1 循环

既然可以迭代就可以用循环,这里会发现普通的for循环和for..in..循环都不太合适,所以用for..of..循环

for(let val of g1){
    console.log(val);  // hello world
}

会发现,在使用for..of.. 遍历的时候,不会遍历return后面的内容

2.3.2 解构

既然generator是可迭代的,那就是可以遍历,所以

generator 不仅可以配合for..of..使用

还可以使用解构赋值操作

解构赋值

let [a,b] = show();
console.log(a,b);  // hello world

2.3.3 扩展运算符

console.log(show());        // show {<suspended>}
console.log(...show());     // hello world

2.3.4 Array.from()

console.log(Array.from(show())); // ["hello", "world"]

2.4 对象的生成器方法

2.4.1 对象生成器方法

由于生成器本身就是函数, 因而可以添加到对象中, 成为对象的方法

let obj  ={
    createIterator:function * (arr){
        for(let i = 0; i< arr.length;i++){
            yield arr[i]
        }
    }
}
let iterator = obj.createIterator([10,20,30])   // 创建迭代器对象
iterator.next()   // {value: 10, done: false}
iterator.next()   // {value: 20, done: false}
iterator.next()   // {value: 30, done: false}

也可以用ES6 对象方法简写方式来创建生成器, 只需要在函数名前添加一个星号(*)

let obj  ={
    *createIterator(arr){
        for(let i = 0; i< arr.length;i++){
            yield arr[i]
        }
    }
}

2.4.2 可迭代对象和for...of循环

具有Symbol.iterator方法的对象,通过这个方法可以创建一个迭代器对象.因此所有通过生成器创建迭代器都是迭代对象, 诸如字符串, 数组,Set,Map ,都默认具有迭代器,

而for...of 循环的本质就是通过每次调用迭代对象的next()方法, 并将迭代器返回的结果对象中的value属性值存到一个变量中, 循环执行直到结果对象中done属性值为true为止

let arr = [10,20,30]
for(let num of arr){
    console.log(num)
}

2.5 generator生成器处理异步

2.5.1 处理本地异步程序

// 异步程序函数
function asyncFun(num) {
    return function (callback) {
        setTimeout(function () {
            callback(num)
        }, 3000)
    }
}


// 处理generator 函数
function run(generator) {

    // 生成迭代器对象
    let gg = generator()

    // 执行第一次
    let result = gg.next()

    // 递归处理生成器中异步程序
    function step() {
        if (!result.done) {
            if (typeof result.value === 'function') {
                result.value(function (val) {
                    result = gg.next(val)
                    step()
                })

            }
        }

    }
    step()
}


run(function* () {
    let value = yield asyncFun(10)
    let value2 = yield asyncFun(value + 10)
    let value3 = yield asyncFun(value2 + 10)
    })

2.5.2 处理ajax程序

// 异步程序函数
function asyncFun(url) {
    return function (callback) {
        $.ajax({
            url,
            success(data) {
                callback({
                    iserr: 0,
                    data,
                })
            },
            error(err) {
                callback({
                    iserr: 1,
                    data: err,
                })
            }
        })
    }
}


// 处理generator 函数
function run(generator) {
    // 生成迭代器对象
    let gg = generator()

    // 执行第一次
    let result = gg.next()
    console.log('result', result)

    function step() {
        if (!result.done) {
            if (typeof result.value === 'function') {
                result.value(function (res) {
                    result = gg.next(res)
                    step()
                })

            }
        }

    }
    step()
}


run(function* () {
    let result = yield asyncFun('https://jsonplaceholder.typicode.com/todos/1')
    console.log('result', result)
    let result2 = yield asyncFun('https://jsonplaceholder.typicode.com/todos/2')
    console.log('result2', result2)
    let result3 = yield asyncFun('https://jsonplaceholder.typicode.com/todos/3')
    console.log('result3', result3)
})

2.5.3 结合promise 处理异步程序

function* gen() {
    yield new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            success: function (data) {
                res(data);
            },
            error: function (err) {
                rej()
            }
        })
    });

    yield new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function (data) {
                res(data)
            }
        })
    });

    yield new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/posts',
            success: function (data) {
                console.log(data)
            }
        })
    })
}

var g1 = gen();

g1.next().value.then(function (data) {
    console.log(data);
    return g1.next().value;
})
    .then(function (data) {
    console.log(data);
    return g1.next().value;
})
    .then(function (data) {
    console.log(data);
})

关于异步的解决方案挺多的

回调函数
事件监听
发布/订阅
Promise对象

ES2017 出来了 async

第二十九节: ES6 generator 与 Promise
1. Promise 承诺,许诺 1.1. 概念 Promise 是异步编程的一种解决方案，比传统的解决方案——...
第二十九节: ES6 generator 与 Promise
回调处理异步会存在很多问题,es6推出了Promise 1. Promise 承诺,许诺 1.1. 概念 Pro...
一次性搞懂 Promise、async await 与 Gene
学习 ES6 的时候，经常听到 Promise、async await 与 Generator 用来处理异步函数，...
JS新特性
ES ES5 ES6 箭头函数 Promise Symbol属性 Iterator Generator async...
ES6 知识点整理
ES6 包括变量、函数、数组、json、字符串、面向对象、promise、generator、async/awa...
JS异步编程(4)-Generator
Generator 是与 Promise 同时由 ES6 引入标准的语法，最早由社区提出和实现主要用于实现一种新的...
JS中的异步操作
JS中异步编程的方法有：回调函数事件监听发布/订阅 promise generator（ES6） async...
Generator
Generator函数概念： 1、ES6提供的解决异步编程的方案之一，比promise 稍微简便一些 ...
es6 异步编程之 Promise 从认识到使用
说起 ES6 异步编程，你可能会想到 Generator、async、Promise 以及各种第三方库，如：co ...
ES6 - Promise, Generator, async
导读：分别使用Promise, Generator, async三种异步操作读取文件，async无论是语义化 /...