async-await消灭异步回调实例详解

// async返回的是Promise对象？
async function testAsync() {
    return 'hello';//上篇文章Promise对象的返回值如果不是Promise，会通过Promise.resolve()转化为Promise，再进行处理
}
const result = testAsync()
console.log(result);//Promise { 'hello' }  说明async返回的是Promise对象

// async返回的是Promise对象,并且可以接Promise的方法？
async function testAsync() {
    // await await等待还是promise对象
    return 'hello'
}
testAsync()
    .then((result)=>{
        console.log(result);
    })
    .catch((error)=>{
        console.log(error);
    })
//hello  妈耶！打印了！说明async返回的是Promise对象，并且可以接Promise的方法，并且！！！默认状态是resolved的

// async函数内部抛出错误或者Promise状态为reject
async function testError(){
    //throw new Error('出错啦~~');
    await Promise.reject('出错了');//await前面有return和没有return效果一样
} 
testError()
    // .then(()=>{},(error)=>{console.log(error);})
    .catch(error=>{console.log(error);})
//Error: 出错啦~~

// await
async function getName(){
    // return '来自星星的你';
    return await '来自星星的你';//上面直接return等价于这个return
}
getName()
    .then(result=>{console.log(result);})
//来自星星的你

// await没有async会报错
function testAwait(){
    return await '西红柿炒辣椒'
}
testAwait()
    .catch(error=>{
        console.log(error);
    })
//SyntaxError: await is only valid in async function

// async封装Promise
async function fn1() {
    return '喜羊羊与灰太狼';// //相当于return Promise.resolve('喜羊羊与灰太狼')
    const data = await fn1();//接收data值
}
fn1()//执行async函数，返回的是一个Promise对象
    .then(data => {
        console.log('content =', data)
    })
​
//content = 喜羊羊与灰太狼

// await---.then()
async function getName(){
    const operate=Promise.resolve('白雪公主')//执行函数
    const name= await operate //await相当于Promise的then  operate.then(name=>{})
    console.log('name:',name)
}
getName();
( async function(){
    const person=await '七个小矮人' //await Promise.resolve('七个小矮人') await后面不跟Promise，也会被封装成Promise
    console.log('person:',person)//400
})();//自执行函数
​
//name: 白雪公主
//person: 七个小矮人

async function testOrder() {
    await Promise.reject('出错了')//UnhandledPromiseRejectionWarning: 出错了
    await Promise.resolve('hello world'); // 不会执行
}
testOrder();

// try...catch
!(async function () {
    const testError = Promise.reject('出错啦~~~')//rejected状态
    // const testError=throw new Error('出错啦~~~');
    try {
        const result = await testError; //await相当于then，但是reject不会触发then
        console.log('success:'+result) //不会输出，因为const result = await testError被报错，被catch捕获
    } catch (error) {
        console.error('error:'+error)//try...catch 相当于Promise的catch
    }
​
})()
//error:出错啦~~~

async function testError() {
    await Promise.reject('出错了')
        .catch(error => console.log(error));//这里捕获错误，不会影响下一个await执行
    
    return await Promise.resolve('hello world');
}
​
testError()
    .then(result => console.log(result))

// 面试题
function getJSON() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(2);
            resolve(2)
        }, 2000)
    })
}
async function testAsync() {
    await getJSON()
    console.log(3);
}
testAsync()
//2
//3

function getJSON() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(2);
            resolve(2)
        }, 2000)
    })
}
// 编译成Promise原理
function testAsync() {
    return Promise.resolve().then(() => {
        return getJSON();
    })
        .then(() => {
            console.log(3);
​
        })
}
testAsync()

// Promise解决方式
function doCallback(n) {
    var myPromise = new Promise(function (resolve, reject) {   
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                resolve(n)
            }
            else {
                reject('失败')
            }
        },0)
    })
    return myPromise;
}
​
doCallback(1)
    .then((result) => { //then是成功执行的方法 返回的还是一个Promise对象
        console.log(result);//打印张三  res是执行
        return fn(2);
    })
    .then((result) => {
        console.log(result);
        return fn(3)
    })
    .then((result) => {
        console.log(result);
        return fn(4)
    })
    .then((result) => {
        console.log(result);
    })
    .catch((result) => { //catch是失败执行的方法
        console.log(result);
    })
    //好多.then,形成.then链啦
//1
//2
//3
//4

//封装一个返回promise的异步任务
function doCallback(str) {
    var myPromise = new Promise(function (resolve, reject) {
        var flag = true;
        setTimeout(function () {
            if (flag) {
                resolve(str)
            } else {
                reject('处理失败')
            }
        })
    })
    return myPromise;
}
​
//封装一个执行上述异步任务的async函数
async function testAsync() {
    var result1 = await doCallback(1);  //await直接拿到fn()返回的promise的数据，并且赋值给result
    var result2 = await doCallback(2);  //await 后面的代码，都可以看做是异步回调 callback 里的内容，都是异步的
    var result3 = await doCallback(3);
    var result4 = await doCallback(4);
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
}//这样是不是简洁优雅多了呢？
//执行函数
testAsync();
//1
//2
//3
//4