async和await的错误处理

async和await的错误处理

sync/await 是ES7提出的基于Promise的解决异步的最终方案。

真正意义上去解决异步回调的问题，同步流程表达异步操作，本质上async 是 Generator的语法糖，async和await, 用于优化Generator的使用, 无需再主动调用next。

1. 不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2. 被async修饰的函数,是一个异步函数 返回的总是Promise对象，可以用then方法进行下一步操作
3. async取代Generator函数的星号*，await取代Generator的yield

async function foo(){
   
    await 异步操作;
    await 异步操作；
}

foo(); // 注意: async函数, 总会返回一个Promise对象

示例：定义异步操作时setTimeout来配合Promise+async+await使用

1.定义Promise函数执行异步操作

function timeout(seconds) {
    // 延迟方法
    return new Promise(resolve => {
   
        setTimeout(resolve, seconds * 1000);
    })
}

2.使用async和await

async function asyncPrint(value) {
   
    console.log('函数执行---');
    await timeout(2);
    console.log('2秒后执行?');
    await timeout(4);
    console.log("4秒后执行?");
    console.log(value);
}
asyncPrint('hello async');

console.log("主线程代码----------");

当await 后面的表达式, 返回的是reject报错信息, 则await不会继续向下执行

如果await后面是一个promise对象, 会直接接受resolve传回来的结果

await 需要配合 Promise 对象来使用；

报错行为：

        function timeout(seconds) {
    // 延迟方法
            return new Promise((resolve,reject) => {
   
            setTimeout(reject, seconds * 1000);
            })
        }   

        const p = async ()=>{
   
        let aaa = await timeout(1)
        console.log(aaa)
        }
        p()

这种错误使用await直接报错，影响了后面的aaa打印，也就是说影响了后面代码的执行。
我也我们要收集错误：
1.try/catch
2.后面接一个.catch()
3.外层包装一层promise处理

1.try/catch

        function timeout(seconds) {
    // 延迟方法
            return new Promise((resolve,reject) => {
   
            setTimeout(reject, seconds * 1000);
            })
        }   

        const p = async ()=>{
   
            try{
   
                let aaa = await timeout(1)
                console.log(aaa)
            }catch{
   
                 console.log("error")
            }
        }
        p()

2.后面接一个.catch()

        function timeout(seconds) {
    // 延迟方法
            return new Promise((resolve,reject) => {
   
            setTimeout(reject, seconds * 1000);
            })
        }   

        const p = async ()=>{
   
            let aaa = await timeout(1).catch(_=>'error')
            console.log(aaa)
        }
        p()

3.外层包装一层promise处理

        const returnNewPro = (promise) => promise.then(res=>[null,res]).catch(err=>[err,null])

        function timeout(seconds) {
    // 延迟方法
            return new Promise((resolve,reject) => {
   
            setTimeout(reject, seconds * 1000);
            })
        }   

        const p = async ()=>{
   
            let aaa = await returnNewPro(timeout(1))
            console.log(aaa)
        }
        p()

以上三种方法用于收集async/await的报错信息，防止代码崩溃。

其他文章

1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面
6.Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
7.node中循环异步的问题[‘解决方案‘]_源于map循环和for循环对异步事件配合async、await的支持
8.js之Promise异步操作管理者

六卿

见贤思齐焉，见不贤内自省

个人见解，不对之处还请斧正。