ES6 DAY4

13) 反射
  与代理一一对应,为代理提供操作方法:操作set/操作get/操作apply/操作contructor
    let proxy = new Proxy(obj, {    // 代理
      set(target,key,val){
        Reflect.set(target,key,val)
      },
      get(target,key){
        return Reflect.get(target,key)
      }
    })
  ...
14) Promise
  1. axios
    异步操作的解决方案,常用于封装ajax
    axios就是基于Promise对Ajax的封装
    0) 特点
      XMLHttpRequests(浏览器) 、http(nodejs)
      默认将data(post)转换为json
      params(get)
      支持Promise
    1) nodejs中应用(http)
      安装cnpm
      $ npm install cnpm -g --registry=https://registry.npm.taobao.org
      $ npm init
      $ cnpm install axios --save
    2) 实例化
      axios
      配置属性
        {
          method
          url
          params
          data
        }

    3) 全局配置
    4) 拦截器
    5) 快捷方法 
  2. 原生ajax的封装
    function loadArticles(){
      // 待定
      return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open()
        xhr.setRequestHeader()
        xhr.send()
        xhr.onreadystatechange = function(){
          if(this.readyState === 4){
            if(this.status === 200){
              // 待定-> 成功 (执行then中的回调)
              resolve(this.response);
            } else {
              // 待定 -> 失败(执行catch中的回调)
              reject(this.response);
            }
          }
        }
      })
    }

    loadArticles().then().catch().finally()
  3. 成员方法
    then/catch/finally 返回值都是一个承诺对象

    Promise.prototype.then(successHandler[,errorHandler])

    Promise.prototype.catch(errorHandler)
    等价于
    Promise.prototype.then(null,errorHandler)

    Promise.prototype.finally(handler)
  4. 静态方法
    Promise.all([p1,p2,...])
      该方法返回值为promise,当p1,p2,...全部执行完毕并且状态resolved的时候,promise的then才会被调用,该then的回调函数的参数是p1,p2,...的运行结果
      案例:当查询完所有的班级,渠道后在调用查询学生的接口;查询学生的时候默认查询第一个班级
      Promise.all(p1,p2).then((result)=>{
        let defaultClazz = result[0].data.data[0]
        loadStudent();
      })
    Promise.race(iterable)
      返回值为promise,返回率先改变状态的promise结果
    Promise.allSettled(iterable)
      返回值为promise,与all不同,当所有的承诺对象状态被确认的时候会执行promise的then,then的参数为结果
    Promise.resolve(val)
      直接返回一个承诺对象,并且状态为成功
      new Promise(resolve => {
        resolve(val);
      })
    Promise.reject(error)
      直接返回一个承诺对象,并且状态为失败
      new Promise((resolve,reject) => {
        reject(error);
      })
    iterable 可迭代的对象,常见的是数组或set...,可迭代对象中的元素是promise实例
15) 迭代器
  0. 执行过程
    next() 调用 -> 指针
  1. ES6可迭代的对象
    数组、字符串、set、map
    实例对象可以直接访问Symbol.iterator,构造函数实现了Symbol.iterator接口
  
    // 标准
    inteface Iterator {
      [Symbol.iterator]():void;
    }
    // 类 == 构造函数 Array String Set Map
    class Array implements Iterator{
      [Symbol.iterator]():void{
      }
    }
    let arr = [1,2,3]
    arr[Symbol.iterator]()
    for(let a of arr){}
  2. 触发迭代器执行的场景
    ...
    for-of
    new Set()/new Map()
    Array.from()
    Promise.all()
    Promise.race()
16) generator函数
  1. 迭代器函数本质上就是一个generator函数
  手动实现一个类数组构造函数,并且该构造函数实现了Symbol.iterator接口

  function* foo(){
    yield 'terry';
    yield 'larry';
    yield 'tom';
  }

  2. next参数
  next参数可以作为上⼀个yield表达式的返回值
  
  let iterator = foo()
  iterator.next(1)
17) 异步函数
  async function foo(){
    await axios.get(url1)
    await axios.get(url2)
  }
  foo()

迭代器是通过generator函数实现的,generator还可以实现异步函数同步化,但是他的执行比较麻烦,通常借助co模块。async函数与generator函数非常相似,内置了执行器

你可能感兴趣的:(javascript)