ES6---new Promise()使用

ES6---new Promise()使用
1、使用then的回调，避免传统方法需要传回调参数
//传统写法
const fn = (flag,callback) => {
    const data = '123456'
    if(flag){
        callback && callback(data)
    }
}
fn(true,(data) => {
    console.log('fn方法里的data',data)
    //打印结果 123456
})

// Promise写法
const fn = (flag) => {
    return new Promise((resolve,reject) => {
        // resolve成功后调用  reject失败后调用  这两个方法无论执行哪一个后都会停止，不会再往下执行
        const data = '123456'
        if(flag){
            resolve(data)
        }else{
            reject()
        }
    })
}
fn().then((data) => {
    console.log('fn方法里的data',data)
    //打印结果 123456
}).catch((err) => {
    //catch方法用来指定reject的回调，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中
    console.log('err',err)
})

2、链式操作，简化层层回调的写法
//传统写法
const fn = (flag,callback1,callback2,callback3) => {
    const data1 = '1';
    const data2 = '2';
    const data3 = '3';
    if(flag){
        callback1 && callback1(data1,() => {
            callback2 && callback2((data2) => {
                callback3 && callback3(data3)
            })
        })
    }
}
fn(true,(data1) => {
    console.log('fn方法里的data1',data1)
},(data2) => {
    console.log('fn方法里的data2',data2)
},(data3) => {
    console.log('fn方法里的data3',data3)
})
//打印结果 1
//打印结果 2
//打印结果 3

// Promise写法
const fn1 = (flag) => {
    return new Promise((resolve,reject) => {
        // resolve成功后调用  reject失败后调用  这两个方法无论执行哪一个后都会停止，不会再往下执行
        const data = '1'
        if(flag){
            resolve(data)
        }else{
            reject()
        }
    })
}
const fn2 = () => {
    return new Promise((resolve,reject) => {
        // resolve成功后调用  reject失败后调用  这两个方法无论执行哪一个后都会停止，不会再往下执行
        const data = '2'
        resolve(data)
    })
}
const fn3 = () => {
    return new Promise((resolve,reject) => {
        // resolve成功后调用  reject失败后调用  这两个方法无论执行哪一个后都会停止，不会再往下执行
        const data = '3'
        resolve(data)
    })
}
fn1().then((data) => {
    console.log('fn方法里的data',data)
    return fn2()
}).then((data) => {
    return fn3()
    console.log('fn方法里的data',data)
    // 中断某一链，跳出循环
    // return Promise.reject('跳出')
}).then((data) => {
    console.log('fn方法里的data',data)
}).catch((err) => {
    // 多个.then只需要后面有一个捕捉错误的catch就可以了
})
//打印结果 1
//打印结果 2
//打印结果 3

3、异步操作
// all的用法
Promise.all([fn1(),fn2(),fn3()]).then((res) => {
    // 上面三个函数是并行执行，三个都执行完才会进入then回调
    // res是返回的所有结果，数组格式
    // 打印结果 [1,2,3]
})

// race的用法
// all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，
这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样

例如：设计超时
//请求某个图片资源
const requestImg(){
    const p = new Promise(function(resolve, reject){
        const img = new Image();
        img.onload = () => {
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}
//延时函数，用于给请求计时
const timeout(){
    const p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
Promise.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

4、基于Promise(ES6)的Async/await(ES7)
async/await是一对好基友，缺一不可，他们的出生是为Promise服务的。

async必须声明的是一个function，不要去声明别的，要是那样await就不理你了（报错）。
async声明的函数的返回本质上是一个Promise。
async正确写法：
async function demo() {//es5写法}
const demo = async() => {//es6写法}
(async () => {    // 闭包写法  
    return Promise.resolve('我是Promise');
})()

async错误写法：
1、const async demo = () => {}   // 必须声明的是一个function

2、 let data = 'data'        // 必须是直系（作用域链不能隔代）
    demo = async () => {
        const test = () => {
            await data
        }
    }

async/await使用：
await是在等待一个Promise的异步返回
const demo = async ()=>{
    const result = await new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('我延迟了一秒')
        }, 1000)
    });
    console.log('上面的没执行完','先等待一会');
    return result
}
// demo的返回当做Promise
demo().then(result=>{
  console.log('输出',result); 
  // 输出 我延迟了一秒
})

// 没有返回值也可以执行
const demo = async ()=>{
    const result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve('我延迟了一秒')
      }, 1000)
    });
    console.log('上面的没执行完','先等待一会');
}
demo();

await也可以用于声明一般情况下的传值
const demo = async ()=>{
    const message = '我是声明值'
    const result = await message;
    console.log(result); 
    console.log('上面的没执行完先等待一会');
    return result
}
demo().then(result=>{
  console.log('输出',result);
})

// 输出结果：
// 我是声明值
// 上面的没执行完先等待一会
// 输出 我是声明值

异步实战：
// 等上面执行完再执行下面
(async ()=>{
  const result = await fn1();
  const result = await fn2();
  const result = await fn3();
  console.log('完成了');
})()

async/await错误处理
const demo = async ()=>{
  const result = await fn1();
  const result = await fn2();
  const result = await fn3();
  console.log('完成了');
}
demo().catch(err=>{
    console.log(err);
})

或者

(async ()=>{
  try{
    const result = await fn1();
    const result = await fn2();
    const result = await fn3();
    console.log('完成了');
  } catch (e) {
    console.log(e); // 这里捕获错误
  }
})()

async/await的中断（终止程序）:直接return
const demo = async ()=>{
    const result = await fn1();
    const result = await fn2();
    return;
    const result = await fn3();
}
demo().then(result=>{
  console.log('输出',result);
})