第二十九节: ES6 generator 与 Promise

2021-12-28 本文已影响0人心存美好

  //之前的异步程序定时器要后执行，先执行同步程序
    function aa() {
      setTimeout(() => {
        console.log('这里是定时器内部111');      //异步程序定时器要后执行，先执行同步程序
      },0)
    }
    aa()
    console.log("这里是同步222");
    
    //aa()放入主程序，发现里面是异步程序，放入异步API中，0秒结束，又加入到任务队列。执行后面的同步语句，所有同步语句执行完，将任务队列里的任务加入执行栈

yb.jpg

      //想个办法异步程序定时器先执行，后执行同步程序
    function aa(callback) {   //第二步  callback回调函数接收，回头有空再调用的函数
      setTimeout(() => {
        console.log('这里是定时器内部111');  
        callback()// 第三步:等定时器执行完了执行callback 
      },0)
    }
    aa(function(){//第一步，这里传个函数，将之前同步语句放进去
      console.log("这里是同步222");  
    }) 
    //回调函数就是把函数作为实参传递给另外一个函数，实参函数在在异步程序里执行，当异步程序处理完了以后，再来执行!

   没有使用后台数据的情况
    function aa() {
      let num = 0;
      setTimeout(()=>{
        num = 50    //假设3秒后后台返回值，把num变成了50
      }, 3000)
      console.log(num);    //打印这一刻后台还没有把数据传输过来
    }
    aa()

   通过回调函数使用后台的数据的情况
       function aa() {
      let num = 0;
      setTimeout((cb) => {  // 通过回调函数使用后台的数据
        num = 50
        cb(num)
      }, 3000, function () {
        console.log(num);  
      })
    }
    aa()

    // 回调函数很容易发生回调地狱(回调处理异步会存在很多问题)
    // 实际中获取数据不一定使用，只是验证权限，是一个注册用户等
    function aa() {
      let num = 0;
      setTimeout(() => {
        num = 'token'    // 第一次先验证注册用户权限token
        setTimeout(() => {
          num = 60;
          // setTimeout(()=>{},num)//第三次带着参数60再发送请求，这就是回调地狱

        }, 2000, num) //第二次拿权限token请求数据时，要将token带过去
      }, 3000)
    }
    aa()

回调处理异步会存在很多问题,es6推出了Promise

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 => {
})

//Promise基本操作
let  promise= new  Promise(function(resolve,reject){//Promise这个容器要有函数作为参数，否则报错。函数里有两个形参resolve（成功调用）,reject（失败调用）
  // console.log(arguments);  //实参列表里有两个函数
});
console.log(promise);  //有了回调函数，返回promise是个对象。状态是pending
//[[PromiseState]]: "pending"   状态等待 不能操作
//[[PromiseResult]]: undefined  结果   不能操作

//同步语句的Promise
let num =0;
let  promise= new  Promise(function(resolve,reject){
if(num==10){
  resolve(50)  //成功时调用的函数  控制台：Promise {<fulfilled>: 50}。50是传的参数
}else{
  reject('承诺失败')    //失败时调用的函数  promise处理同步程序  ,控制台会有红色报错信息
}
});
console.log(promise);

// 异步语句的promise始终保持着同步打印的结果，没有实时更新状态

    let num = 10;
    let promise = new Promise(function (resolve, reject) {
      setTimeout(() => {
        if (num == 10) {
          resolve(50)
        } else {
          reject('承诺失败') 
        }
      },3000)
    });
    console.log(promise);    //这是同步打印，三秒以后状态已经改变了，一直没有通知，没有拿到改变后的状态，始终是等待期

// promise最基本的用法，内化报错信息
  // promise原型上then方法解决实时更新状态问题，内化报错信息,不推送到控制台
let num = 0;
      let promise = new Promise(function (resolve, reject) {
        setTimeout(() => {
          if (num == 10) {
            resolve(50)
          } else {
            reject('承诺失败')
          }
        }, 3000)
      });
      console.log(promise);
      promise.then(function (val) {   //这个函数相当于实参，传给Promise这个函数
        console.log('承诺成功后调用的函数' + val);
      }, function (err) {    //这个函数相当于实参，传给Promise这个函数
        console.log('承诺失败调用的函数' + err);
      })
//没有显示调用then方法时，有报错信息后抛到控制台红色显示。调用then方法后就可以内化掉报错信息，不会因此终止程序

ajax发送请求

  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    // console.log(window.$);//一个函数，jquery选择器，有了外部链入的script脚本，$才管用
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts',  //服务器路径
      type: 'GET',//请求方式，默认get
      success: function (data) {   //请求后台成功，后台会将数据传给成功函数
        console.log(data);
      },
      error: function (err) {           //请求后台失败
        console.log(err);
      }
    })
  </script>

//ajax请求的回调地狱（一层套一层）
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
     $.ajax({
      url: 'https://jsonplaceholder.typicode.com/posts/1/',
      type: 'GET',
      success: function (data) {
        console.log(data);
        //第一次请求数据成功，发送第二次数据
        let { id = 0 } = data || {}// 解构id  id 默认值
        $.ajax({
          url: `https://jsonplaceholder.typicode.com/posts/${id + 2}`, //注意``
          type: 'GET',
          success: function (data) {
            console.log(data);
            //第二次请求数据成功，发送第三次数据
            let { id = 0 } = data || {}
            $.ajax({
              url: `https://jsonplaceholder.typicode.com/posts/${id + 2}`, //注意``
              type: 'GET',
              success: function (data) {
                console.log(data);
                //第三次次请求
                let { id = 0 } = data || {}
            $.ajax({
              url: `https://jsonplaceholder.typicode.com/posts/${id + 2}`, //注意``
              type: 'GET',
              success: function (data) {
                console.log(data);
                //第三次请求
              },
              error: function (err) {
                console.log(err);
              }
            })
              },
              error: function (err) {
                console.log(err);
              }
            })
          },
          error: function (err) {
            console.log(err);
          }
        })
      },
      error: function (err) {
        console.log(err);
      }
    })
     </script>

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

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

<!-- 使用Promise处理后台异步请求 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>   
    let promise = new Promise((resolve, reject) => {
      $.ajax({   //发送ajax请求
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success: function (data) {   //成功了执行 resolve(data)，相当于执行then方法的第一个参数
          resolve(data)
        },
        error: function (err) {
          reject(err);
        }
      })
    })
    //Promise通过then方法来处理
    promise.then((data) => {     // 不需要使用this，arguments所以使用箭头函数
      console.log(data);  //数据执行
    }, (err) => {
      console.log(err);
    })
  </script>

<!-- 使用Promise处理后台异步请求 。以上代码的优化-->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>   
    let promise = new Promise((resolve, reject) => {
      $.ajax({   
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success:resolve,  //代码优化
        error:reject      //代码优化
      })
    })
    promise.then((data) => {    
      console.log(data);
    }, (err) => {
      console.log(err);
    })
  </script>

1.5.2 then方法

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

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

// 调用then方法也会返回一个新的promise，并且是成功状态，值为return的值
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>   
    let promise = new Promise((resolve, reject) => {
      $.ajax({   
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success:resolve,
        error:reject
      })
    })
   let pro_then = promise.then((data) => {    //调用then方法也会返回一个新的promise，并且是成功状态，值为return的值
      console.log(data);
      return new Promise((resolve,reject)=>resolve(59))
      // return 50;
    }, (err) => {
      console.log(err);
    })
    console.log(pro_then);
  </script>

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

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

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

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

<!-- Promise的then方法可以无限调用下去，可以解决回调地狱的问题 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    let promise = new Promise((resolve, reject) => {
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success: resolve,
        error: reject
      })
    })
    let pro_then = promise.then((data) => {    //调用then方法也会返回一个新的promise，等待的promise并且是成功状态，值为return的值
      console.log(data);
      // return new Promise((resolve,reject)=>resolve(undefined))//不写return默认返回undefined，且是成功的
      return 50;
    }, (err) => {
      console.log(err);
      return new Promise((resolve, reject) => { reject(10) }) //失败调用
      //控制台中这样写的let proerr =new Promise((resolve,reject) => {reject(10)}) ，返回undefined
    })
    console.log(pro_then);


    let proerr = new Promise((resolve, reject) => { reject(10) })   //执行的失败的函数
    pro2_then = proerr.then(() => { }, (err) => { console.log(err); return 50 })  //第一次执行失败函数后，第二次又调用then方法
    console.log(pro2_then);    //不管上一次执行的第一个成功函数还是第二个失败的函数，它的返回值都会自动包装成成功状态
    // then方法可以无限调用下去，可以解决回调地狱的问题
  </script>

//通过promise 可以将ajax请求的回调地狱拉平。注意这个拉平只是代码组织的拉平，原理还是一样的
 <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    let promise = new Promise((resolve, reject) => {
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success: resolve,
        error: reject
      })
    })
    promise.then((data) => {
      console.log(data);
      let { id } = data   //取到所需要的id
      return new Promise((resolve, reject) => { //显示的返回一个promise
        $.ajax({    //发送第二次请求
          url: `https://jsonplaceholder.typicode.com/posts/${id + 2}`,
          type: 'GET',
          success: resolve,
          error: reject
        })
      })
    }, (err) => {
      console.log(err);
      return new Promise((resolve, reject) => { reject(10) })
    })
      .then((data) => {    //第二次连续调用then方法
        console.log(data);
        let { id } = data   //取到所需要的id
        return new Promise((resolve, reject) => {
          $.ajax({
            url: `https://jsonplaceholder.typicode.com/posts/${id + 2}`,
            type: 'GET',
            success: resolve,
            error: reject
          })
        })
      }, (err) => {
        console.log(err);
        return new Promise((resolve, reject) => { reject(10) })
      })
      .then((data) => {
        console.log(data);
      })

1.6. catch()

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

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

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

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

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

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

 // 将then中的第二个函数移动到了catch里
    let promise = new Promise((resolve, reject) => {
      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/1/',
        type: 'GET',
        success: resolve,
        error: reject
      })
    })
    promise.then((data) => {
      console.log(data);
    })
    .catch((err) => {   // 将then中的第二个函数移动到了catch里
      console.log(err);
      return new Promise((resolve, reject) => { reject(10) })
    })
     //then里有两个函数，一个成功调用的，一个失败调用的。es6可以将失败回调函数放到catch里

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方法就起到这个作用。

// Promise构造函数上提供的静态方法resolve, rejec
let num =50;  //将一个值转成成功的状态
let promise = Promise.resolve(num)//构造函数上提供一个静态方法
console.log(promise);   // 成功后的状态，值为50
promise
.then(data=>console.log(data))

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

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

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

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

Promise.resolve`方法的参数分成四种情况。
1、参数是一个 Promise 实例

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

let promise = new Promise(res=>res(50))    //构造函数创建一个Promise对象，成功状态
console.log(promise);      
let pro = Promise.resolve(promise)
console.log(pro === promise);  //两个对象是同一个对象 
pro.then(data=>console.log(data))// 通过两个对象拿到的数据是一样的
promise.then(data=>console.log(data))

2、参数是一个thenable对象
thenable对象指的是具有then方法的对象，比如下面这个对象。

Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then`方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};  
let pro = Promise.resolve(thenable);
console.log(pro);
pro.then(data=>console.log(data))//拿到数据

   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。

et pro = Promise.resolve('xingyou');
console.log(pro);
pro.then(data=>console.log(data))//拿到数据

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

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

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

4、不带有任何参数

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

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

let pro = Promise.resolve();
console.log(pro);
pro.then(data=>console.log(data))//拿到数据

1.8.2 Promise.reject()

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

Promise.reject就是将参数转为失败状态的内容，返回的也是promise对象

   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 方法:统一处理成功后的Promise。Promise.all([])统一调用then方法

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

Promise.all([p1,p2,p3])
把promise打包,扔到一个数组里面,打包完还是一个promise对象
如果是all方法,必须确保,所有的promise对象,都是resolve状态,都是成功的状态,否则就报错

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

let p2 = Promise.reject("p2");  //只要有一个失败就会走catch方法，全部成功才走then

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

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

1.10 Promise.race()

promise的race的方法
Promise.race([p1,p2,p3])
这个和all用法一样,唯一不同之处就是race方法只要最前面一个resolve就可以正常执行,如果排在前面的是reject就报错

// 执行第一个状态发生变化的Promise
let p1 = Promise.reject("p1成功");

let p2 = Promise.resolve("p2");  //只要有一个失败就会走catch方法，全部成功才走then

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

Promise.race([p1,p2,p3])
.then(res => {
    console.log(res);   // 这里的res是一个有p1,p2,p3里面的resolve组成的数组
})
.catch(err=>{
  console.log('err',err);
})

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)
})

let p1= new Promise(resolve =>{
  setTimeout(() =>{
    resolve(123)
  },3000)
})
let pp =new Promise(resolve =>{
  setTimeout(()=>{
    resolve('请求超时')
  },2000)
})
Promise.race([p1,pp])
.then(res =>{
  console.log(res);
})
.catch(err => console.log('err',err))

2.generator 生成器

2.1. 基本概念

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

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

生成器,也是一个函数,

2.1.1 跟普通函数的区别

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

generator函数一个一个处理yield

function * gen(){
  yield 10;
  yield 20;
  yield 30;
  return 50;  //最后一次拿到return的值。obj.next()执行到最后done:true
}
let obj = gen();  //执行后返回enerator对象
console.log(obj);//执行后，会返回一个对象，对象上有个next()方法
console.log(obj.next());//每次调用next方法,获取yield后面对应的值
// 当done第一次为true是表示generator里面内容执行完毕,如果还继续调用next方法,返回值为undefined,done依然为true,告诉你执行完毕了

generator函数批量处理yield

    let arr = [10, 20, 30, 40, 50, 60, 70]
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let obj = gen(arr);
    console.log(obj);
    console.log(obj.next());

   //报错写法
   let arr = [10, 20, 30, 40, 50, 60, 70]
    function* show(arr) {
      arr.forEach(function (item, index) {
        yield item  // 注意 yield 关键字只能在生成器generator函数中使用（直属的）,现在在forearch的回调函数中
      })
    }
    let obj = gen(arr);
    console.log(obj);

generator函数表达式

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

var show = function * (arr){   //此时因为是匿名函数表达式, 所以`*`在function 关键字和小括号之间
    for(let i = 0; i< arr.length; i++){
        yield arr[i]
    }
}

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

    //生成器的目的就是为了创建迭代对象，创建的迭代器对象可以使用for of循环（普通的对象不能使用for of）for of 就是循环迭代器对象的
    let arr = [10, 20, 30, 40, 50, 60, 70]
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let obj = gen(arr);
      // let obj ={name:'dddd',age :18,like:"读书"}  //普通的对象不能使用for of 会报错
    for(let val of obj){
      console.log(val);

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

    // 生成的迭代器对象有迭代器，所以也可以解构
    let arr = [10, 20, 30, 40, 50, 60, 70]
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let [a, b, c, d, ...e] = gen()
    console.log(a, b, c, d, e);  
    console.log(e);

   // 生成的迭代器对象有迭代器，所以也可以解构
   let arr = ['hello', 'world'];
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let [a, b] = gen();
    console.log(a, b);

    let arr = [10, 20, 30, 40, 50, 60, 70]
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let newArr = [...gen(arr)]
    console.log(newArr == arr);
    console.log(newArr);

 // Array.from(gen()) 创建数组
    let arr = [10, 20, 30, 40, 50, 60, 70]
    function* gen() {
      for (let i = 0; i < arr.length; i++) {
        yield arr[i]
      }
    }
    let newArr = [Array.from(gen())]
    console.log(newArr == arr);
    console.log(newArr);

2.4 对象生成器方法

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

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

//也可以用ES6 对象方法简写方式来创建生成器, 只需要在函数名前添加一个星号(*)
let obj  ={
    *createIterator(arr){
        for(let i = 0; i< arr.length;i++){
            yield arr[i]
        }
    }
}
let iterator = obj.createIterator([10,20,30])   // 创建迭代器对象
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

    //利用生成器给普通对象写一个迭代器,对象就可以使用for of了
    let obj = {
      *[Symbol.iterator]() {    //利用生成器给对象写一个迭代器
        yield 10;
        yield 20;
        yield 30;
        yield 40;
        yield 50
      }
    }
    // for(let val of obj){
    //   console.log(val);   // 普通对象不能使用for of，会报错
    // }
    for (let val of obj) {  //for of会调用对象的迭代器，可以利用生成器给对象写一个迭代器
      console.log(val);
    }

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

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

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

//传参
function * show(){
  let a =yield 10   //可以把yield看成断点 返回的值{value:10,done:false}
  console.log(a);
  let b = yield a+20   //第二个断点，返回{value:30,done:false}
  console.log(b);
}
let obj =show()
console.log(obj);
console.log(obj.next())   
console.log(obj.next(10))    //把返回的值赋值给a
console.log(obj.next(15))   //传一个15进去，b就是15。没有yield 返回{value: undefined, done: true}

2.5 generator生成器处理异步

2.5.1 处理本地异步程序

//一个本地的异步程序
function asyncFun(num){   
  return function(cb){
    setTimeout(function(){
      cb(num)      //3、cb中的函数体执行，使用num的值
    },3000)
  }
}
let fn = asyncFun(10);   //1、执行结果返回一个函数体
fn(function(val){        //2、返回的函数执行，参数是一个函数，被cb接收
  console.log(val);
})

    //generator处理异步程序
    function asyncFun(num) {
      return function (cb) {
        setTimeout(function () {
          cb(num)      //3、cb中的函数体执行，使用num的值
        }, 3000)
      }
    }
    //封装一个处理异步的函数
    function run(generator) {
      let obj = generator()   //通过生成器创建迭代器对象
      console.log(obj);   //迭代器对象原型上有个next方法
      let result = obj.next();
      console.log(result);//next方法每次执行都会返回结果对象

      function step() {  //采用递归判断next是否执行完
        if (!result.done) {
          result = obj.next();
          console.log(result);
          step()  //递归调用
        }

      }
      step()   //先执行一次
    }
    run(
      function* () { //传一个匿名生成器函数
        yield 10;
        yield 20
        yield 30
      })

    //如何让异步程序与迭代函数挂钩
    function asyncFun(num) {
      return function (cb) {
        setTimeout(function () {
          cb(num)
        }, 3000)
      }
    }
    function run(generator) {
      let obj = generator()
      console.log(obj); //通过生成器创建迭代器对象
      let result = obj.next(); //迭代器对象原型上有个next方法
      console.log(result);    //next方法每次执行都会返回结果对象
      function step() {
        if (!result.done) {
          if (typeof result.value === 'function') {   //value是否为函数
            result.value(function (val) {      //执行value的是return出来的函数，且要传一个回调函数给参数cb,回调函数cb三秒以后执行
              console.log(val);
              result = obj.next(val);   //返回下次执行的结果对象
              console.log(result);
              step()
            })
            //每次都会返回结果对象{value:,done:},当done为true是value为undefined，undefined没有value属性
          }
        }
      }
      step()
    }
    run(
      function* () {
        let res = yield asyncFun(10);   //将yield 10换成yield asyncFun(10)实现与异步程序挂钩，此时返回的结果对象中的value的值就为一个函数
        res = yield asyncFun(res + 10)
        res = yield asyncFun(res + 10)
        console.log(res);
      })

2.5.2 处理ajax程序

//复用ajax的异步函
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function asyncFun(url) {   //generator 发送ajax的异步函数 参数换成url
      return function (cb) {    //本地定时器不要了，换成ajax请求
        $.ajax({
          url,  //对象属性简写方式
          success(data) {   //向后台发送的数据请求成功了把数据传给data
            cb({
              iserr: 0,    //0表示没有报错
              data,
            })
          },
          error(err) {
            cb({
              iserr: 1,
              data: err,    // 错误信息
            })
          }
        })
      }
    }

    let fn = asyncFun('https://jsonplaceholder.typicode.com/todos/1')  // 发送ajax的异步函数执行，返回return的函数
    let fn2 = asyncFun('https://jsonplaceholder.typicode.com/todos/2') //复用ajax请求函数asyncFun，减少代码量，只传url
    fn(function (result) {//返回的这个函数执行时，会接收一个回调函数
      if (!result.iserr) {
        console.log('请求成功');
        console.log(result.data);
      } else {
        console.log('请求失败');
      }
    })
    fn2(function (result) {//返回的这个函数执行时，会接收一个回调函数
      if (!result.iserr) {
        console.log('请求成功');
        console.log(result.data);
      } else {
        console.log('请求失败');
      }
    })

 <!-- generator通过封装处理异步ajax请求 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function asyncFun(url) {   //generator 发送ajax的异步函数 参数换成url
      return function (cb) {    //本地定时器不要了，换成ajax请求
        $.ajax({
          url,  //对象属性简写方式
          success(data) {   //向后台发送的数据请求成功了把数据传给data
            cb({
              iserr: 0,    //0表示没有报错
              data,
            })
          },
          error(err) {
            cb({
              iserr: 1,
              data: err,    // 错误信息
            })
          }
        })
      }
    }

    function run(generator) {
      let obj = generator()
      console.log(obj); //通过生成器创建迭代器对象
      let result = obj.next(); //迭代器对象原型上有个next方法
      console.log(result);    //next方法每次执行都会返回结果对象
      function step() {
        if (!result.done) {
          if (typeof result.value === 'function') {   //value是否为函数            
            result.value(function (val) {
              console.log(val);
              result = obj.next(val);
              step()
            })
          }
        }
      }
      step()
    }
    run(//下载代码层面已经看不出嵌套了
      function* () {
        let result = yield asyncFun('https://jsonplaceholder.typicode.com/todos/1');  //传url
        console.log('result', result);
        if (!result.iserr) {
          console.log('请求成功');
          console.log(result.data);
        } else {
          console.log('请求失败');
        }
        result = yield asyncFun('https://jsonplaceholder.typicode.com/todos/' + (result.data.id + 1));
        console.log('result', result);
        if (!result.iserr) {
          console.log('请求成功');
          console.log(result.data);
        } else {
          console.log('请求失败');
        }
        result = yield asyncFun('https://jsonplaceholder.typicode.com/todos/' + (result.data.id + 1));
        console.log('result', result);
        if (!result.iserr) {
          console.log('请求成功');
          console.log(result.data);
        } else {
          console.log('请求失败');
        }
      })

  </script>

  <!-- generator结合promise 处理异步程序简单分析 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function* show() {
      yield new Promise((resolve, reject) => {
        resolve(10)   //这里如果调用了resolve，后面的then方法就会拿到data数据10
      })
      yield new Promise((resolve, reject) => {    //如果还有第二个yield
        resolve(200)
      })
    }
    let gen = show();   //生成器对象
    let a = gen.next();   //结果对象{value: Promise, done: false}。第一次调用next()时，程序终止在yield后面，能够拿到值，表示定义一个promise已经执行完了，就可以执行第二次的generator了
    a.value.then(   //结果对象的值是Promise就可以使用then方法
      (data) => {
        console.log(data);   //第一次的结果
        return gen.next().value  //第二次的generator的值是也promise对象，取出来，然后return出去
      }
    ).then(((aa) => {
      console.log(aa);    //拿到第二次的值
    }))
  </script>

  <!-- 三个平级的请求结合promise 处理异步程序 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function* show() {
      yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            success: resolve,
            error: reject
          })
        })

      yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: resolve,
            error: reject
          })
        })

      yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/3',
            success: resolve,
            error: reject
          })
        })
    }

    let gen = show();
    gen.next()
      .value
      .then(function (data) {    //then方法第一个值是数据            
        console.log(data);
        return gen.next().value
      })
      .then(
        data => {
          console.log(data);
          return gen.next().value
        }
      )
      .then(
        data => {
          console.log(data);
        }
      )
  </script>

  <!-- 递归嵌套请求结合promise 处理异步程序 ，拿到第一次的值发送第二次请求，拿到第二次发送第三次的请求-->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function* show() {
      let id = yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            success: resolve,
            error: reject
          })
        })

      id = yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: `https://jsonplaceholder.typicode.com/todos/${id + 2}`,  //id是基于上次的id加2
            success: resolve,
            error: reject
          })
        })

      id = yield new Promise(
        (resolve, reject) => {
          $.ajax({
            url: `https://jsonplaceholder.typicode.com/todos/${id + 2}`,
            success: resolve,
            error: reject
          })
        })
    }

    let gen = show();
    gen.next()
      .value
      .then(function (data) {    //then方法第一个值是数据 
        console.log(data);
        let { id } = data;
        console.log(id)
        return gen.next(id).value   //id拿到后可以作为下一次的参数   ，也就是yield的结果会返回一个id
      })
      .then(
        data => {
          console.log(data);
          let { id } = data;
          console.log(id)
          return gen.next(id).value
        }
      )
      .then(
        data => {
          console.log(data);
          let { id } = data;
          console.log(id)
        }
      )
  </script>

<!-- async实际工作中使用异步函数,async函数中代码好像被拉平了（一行异步一行同步） -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    async function show() {   //*去掉，前面加async   yield换成await,定义个变量拿到结果
      try {    //避免出错，还要捕获一下
        let result1 = await new Promise(
          (resolve, reject) => {
            $.ajax({
              url: 'https://jsonplaceholder.typicode.com/todos/1',
              success: resolve,
              error: reject
            })
          })
        console.log('result1', result1);
        let result2 = await new Promise(   //之前的程序是先同步后异步。有了await以后不断的等待异步结果，再执行同步
          (resolve, reject) => {
            $.ajax({
              url: 'https://jsonplaceholder.typicode.com/todos/2',
              success: resolve,
              error: reject
            })
          })
        console.log('result2', result2);
        let result3 = await new Promise(
          (resolve, reject) => {
            $.ajax({
              url: 'https://jsonplaceholder.typicode.com/todos/3',
              success: resolve,
              error: reject
            })
          })
        console.log('result3', result3);
      } catch (err) { console.log(err); }
    }
    show()

  <!-- async函数的请求函数还可以封装，代码更加优雅 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function request(url) {   //封装请求函数  参数为url
      //会返回一个Promise
      return new Promise(
        (resolve, reject) => {
          $.ajax({
            url,
            success: resolve,
            error: reject
          })
        })
    }
    async function show() {
      try {
        let result1 = await request('https://jsonplaceholder.typicode.com/todos/1')
        console.log('result1', result1);
        let result2 = await request('https://jsonplaceholder.typicode.com/todos/2')
        console.log('result2', result2);
        let result3 = await request('https://jsonplaceholder.typicode.com/todos/3')
        console.log('result3', result3);
      } catch (err) { console.log(err); }
    }
    show()

  <!-- async函数的请求函数还可以封装，代码更加优雅 id还可以使用上一次的值得到 -->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function request(url) { 
      return new Promise(
        (resolve, reject) => {
          $.ajax({
            url,
            success: resolve,
            error: reject
          })
        })
    }
    async function show() {
      try {
        let result1 = await request('https://jsonplaceholder.typicode.com/todos/1')
        console.log('result1', result1);
        let id = result1.id;    //id还可以使用上一次的值得到
        let result2 = await request(`https://jsonplaceholder.typicode.com/todos/${id+2}`)
        console.log('result2', result2);
        id = result2.id;
        let result3 = await request(`https://jsonplaceholder.typicode.com/todos/${id+2}`)
        console.log('result3', result3);
      } catch (err) { console.log(err); }
    }
    show()
  </script>

 <!-- 带await的异步函数对象调用，需要在函数前面加上async ，否则报错-->
  <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
  <script>
    function request(url) {
      return new Promise(
        (resolve, reject) => {
          $.ajax({
            url,
            success: resolve,
            error: reject
          })
        })
    }
    let obj = {      
      async show() {    //这种es6对象方法的简写方式会报错，因为await必须在async函数里，所以在前面加上async
        // show: async function show(){   //这是es5带await对象方法写法
        try {
          let result1 = await request('https://jsonplaceholder.typicode.com/todos/1')
          console.log('result1', result1);
          let id = result1.id;    //id还可以使用上一次的值得到
          let result2 = await request(`https://jsonplaceholder.typicode.com/todos/${id + 2}`)
          console.log('result2', result2);
          id = result2.id;
          let result3 = await request(`https://jsonplaceholder.typicode.com/todos/${id + 2}`)
          console.log('result3', result3);
        } catch (err) { console.log(err); }
      },
    }

    obj.show()   //带await的异步函数对象调用