ES6异步方法

一、函数的拓展
函数传参与默认值
ES6函数的默认值：（x = 6）
默认值可以写表达式，表达式在函数执行阶段执行

//传参方式一
function foo(x = a + 6, y, z){
  console.log(x, y, z);
}
let a = 10;
foo();

//传参方式二
function foo({x = 5, y = 6, z}){
  console.log(x, y, z);
}
foo({z:3, x:1});

//传参方式三
function foo(...arr){
  console.log(arguments);
  console.log(arr);
}
foo(1, 2);

箭头函数

let foo = a => a; //最基础的箭头函数
//ES5函数的this指向是根据调用对象来绑定，this是执行时绑定
//ES6箭头函数的this是定义时绑定，绑定的是当前作用域下的this

foo(a){
  return a;
}
//多个或者零个参数用()
//只有一个参数可以直接写参数名
//...接受没有被变量接受的所有参数
//this是定义时绑定的，无法改变
let foo = (a, b, c, d, ...arr) => {
  console.log(this);
  console.log(a, b, c, d, arr);
};
foo.call([], 1, 2, 3, 4); //无法改变this指向

let foo = a => a+1;
console.log(foo(2));

二、promise

let img = new Image();
img.src = "";
//图片加载完毕的时候执行
img.onload = function(){
  document.body.appendChild(this);
  codeImg(this);
}
function codeImg(img){
  console.log(img.width);
}

实例化promise
进行中 成功 失败
rending fullfilled reject

new Promise((resolve, reject)=>{
  let img = new Image();
  img.src = "";
  //加载完毕，执行成功的回调
  img.onload = resolve(img);
  //加载失败，执行失败的回调
  img.onerror = reject;

  setTimeout(()=>{
    if(true){
      //调用的是成功的回调，那么他的状态就是成功
      resolve();
    }else{
      //反之就是失败
      reject();
    }
  }, 3000);
})
//传参，可传两个回调 成功 失败
.then((img)=>{
  console.log("成功");
})
//失败的时候回调
.catch((err)=>{
  console.log(err);
});

三、promise例子

new Promise((resolve, reject)=>{
  return resolve(6);  //可以用来中断代码的执行
})
.then((d)=>{
  console.log(d);
  //return 3;
  //等价于下面
  return new Promise((resolve)=>{
    resolve(3);
  });
})
.then((key)=>{
  console.log(key);
})
.then(()=>{
  console.log(1);
})
.catch((err)=>{
  console.log(err);
})

主动成功、主动失败

//主动返回成功
Promise.resolve(foo())
              .then((d)=>{
                console.log(d);
              });
//主动返回失败
Promise.reject("失败")
              .catch((err)=>{
                console.log(err);
              });

Promise.all 必须是所有的Promise状态都是成功的（调用了resolve）才会执行all的then的成功回调

//电影院推荐
//不同的用户群体 推荐 不同的电影类型
//获取用户是一个接口 获取电影是一个接口 推荐状态是一个接口

//获取用户群体
let p1 = new Promise((resolve)=>{
  console.log("开始请求用户数据");
  //code...后台去请求用户群体
  setTimeout((arr)=>{
    console.log("拿到用户数据了");
    resolve(arr);
  }, 1000, [1, 2, 3, 4, 5, 6]);
});
//获取电影集合
let p2 = new Promise((resolve, reject)=>{
  console.log("开始请求电影集合");
  //code...后台去请求电影集合
  //setTimeout(resolve, 3000, [1000, 1001, 1002]);
  setTimeout((arr)=>{
    console.log("拿到电影集合了");
    resolve(arr);
    //reject("电影数据拿不到");
  }, 3000, [1000, 1001, 1002]);
});

all 接受一个数组，数组里面都是promise对象，如果不是，会被转化成promise

Promise.all([p1,p2])
              .then((arr)=>{
                console.log(arr);
              })
              .catch((err)=>{
                console.log(err);
              })

race 只要一个成功就可以了

Promise.race([p1, p2)
              .then(()=>{
                console.log("某个请求已经成功");
              })

四、async函数
Generator + Promise 的语法糖
async函数 await关键字

//在函数前面加上async关键字
async function foo(){
  let img = await new Promise((resolve)=>{
    let newImg = new Image();
    newImg.src = "";
    newImg.onload = function(){
      resolve(this);
    };
    setTimeout(resolve, 3000, {
      width:665
    })
  });
}