2-ES6异步编程

一、for…of 遍历数组

  let arr = [2,3,4,5,6];
  //遍历数组时，item为数组中的每一项
  for(let item of arr){
    console.log( item );
  }

二、iterator 遍历器

JS中具有数据“集合”的类型，数组、set、html集合等等，在项目中需要一种机制来访问这些集合中的每一项。itrator就是用来提供统一的遍历机制的接口（interface）。

ES6中预先为数组实现了iteraotr接口，但是直觉使用iterator遍历语法繁琐，实际时使用是它的语法糖：for…of

  let arr = ["北京","上海","广州","西安"];
  let ite = arr[Symbol.iterator]();
  console.log( ite.next() );
  console.log( ite.next() );
  console.log( ite.next() );

为对象实现for…of遍历

  let obj = {name:"jack", age:20, sex:"男"}
  obj[Symbol.iterator]= function(){
    let arr = Object.keys(obj); //["name","age","sex"];
    let index = 0;//保存遍历的次数
    return {
      next:function(){
        let val = obj[arr[index++]];//根据键返回对象中的值，每次执行next()，index值加1
        if( index <= arr.length ){
          return {value:val,done:false}
        }else{
          return {value:undefined,done:true}
        }
      }
    }
  }
  let ite = obj[Symbol.iterator]();
  console.log( ite.next() );
  console.log( ite.next() );
  //实现iterator接口代码后，就也可使用for...of遍历对象了
  for( let item of obj){
    console.log( item );
  }

三、generator 函数

generator是ES6早期提供的用于异步编程的解决方案。generator 可以看成是一个状态生成器，内部封存了多个状态，而genereator函数执行的结果会产生一个遍历器对象（iterator）

  // 声明generator函数必须有一个* 修饰符
  function* fn(){
    return "ok";
  }
  let ite = fn();
  console.log( ite.next() ); //{value: "ok", done: true}
  console.log( ite.next() ); //{value: undefined, done: true}

四、 yield表达式

​ yield必须放在 generator函数中使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q4hKQkPg-1618748712719)(generator.png)]

五、回调地狱

六、promise

promise是ES6提供的异步编程解决方案，比传统的回调函数的方法更合理，功能更强。

promise( 承诺 ) 对象有以下特点：

1） promise对象有三种状态：pending( 等待中 )，fullfilled( 成功的 )、rejected ( 失败的 )。只有异步操作的结果可以决定是哪一种状态。

2） 一旦状态完成，就不会改变，任何时候都是这个结果。 promise状态改变只有两种 pending=>fulfilled，或者 pending => rejected。这两种状态一旦有一个发生，就会保存这个结果，被称为已定型（resolved）

  let p1 = new Promise((resolve,reject)=>{
    // 此处写异步操作的代码
    setTimeout(function(){
      // resolve("成功");
      reject("失败");
    },500)
  });
  console.log( p1 );

七、promise与ajax结合的基本用法

  function getJson(url) {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: "get",
        url,
        data: null,
        dataType: "json",
        success(response) {
          resolve(response)
        },
        error(err) {
          reject(err);
        }
      });
    })
  }
  // promise实例对象具有then()处理成功，catch()处理失败
  // 在then()处理函数的最后一行retrun 一个新的promise实例对象，就可以不断的调用then()方法，避免了嵌套的写法
  getJson("./data/provinice.json")
  .then((data) => {
    console.log(data);//返回省的数据
    return getJson("./data/city.json")
  })
  .then((data)=>{
    console.log( data ); //返回市的数据
    return getJson("./data/town.json");
  })
  .then((data)=>{
    console.log( data ); //返回区县数据
  })
  .catch((err)=>{
    console.log( err );
  })

wn.json");
})
.then((data)=>{
console.log( data ); //返回区县数据
})
.catch((err)=>{
console.log( err );
})