async/await 来处理异步

async的用法它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。废话不多说直接上代:

  async function hello() { return 'hell0' } hello() console.log('11111')

但是控制台打印出来的却是 11111  没有  hello,首先一点我可可以知道,调用该异步函数,虽然没有执行,但是却没有影响到后面的代码的执行,所以说异步函数,是不会阻塞后面的代码的执行的,然后为了看到我们这个函数到底执行拿到了什么?可以打印下看一下:  console.log( hello())  

竟然返回的是一个Promise的对象,所以要想拿到Promise的值,我们可以用.then的方法.

async function hello() { return 'hell0' } hello().then(result=>{ console.log(result) }) console.log('11111')

查看控制台,这样我们就拿到了我们想要的值,所以呢我们可以知道,async 函数,总是会返回一个

Promise ,而这个Promise中有一个resolved, 这就是async的实现原理,所以我们想要拿到async异步函数的值,其实就是内部调用  Promise.solve(),把他作为promsie传递出来.

.

也许你会为伴随着async的还有一个await的吗.下面看这行代码:

  async function f() {        let promise = new Promise((resolve, reject) => {          setTimeout(() => resolve("hello!"), 1000);        });        let result = await promise;        console.log(result)      }      f();复制代码

当我们执行fn()函数的时候,明显看到有延迟,resolve的值最终成了result,首先我们可以看到await关键字是放到了async的后面,哪能放到前面吗,明确告诉你不可以,这两个的关键字的关系是,有async可以有await,但是有await一定有async,   而且我们看到await后面可以放表达式,不过一般我们放的都是promise,为了再次演示我们还可以看下面的代码:

function  sayHello (saySomething) {            return  new Promise((resolve,reject)=>{                resolve('说'+saySomething)            },1000)    }    async  function toSay(){        let  result =  await  sayHello("hello")        console.log(result)    }    toSay()
     控制台 -->说hello复制代码

由上面所说的可以总结几点,  asyncy异步函数使函数总是返回一个promise 在这个异步函数中可以使用await ,用来等待promise处理完比,所以通过saync/await  我们可以很少需要写promise,then/catch,同时他也是解决回调地狱的好方法,请看下面代码:

function  async_add(m,n,callback){            return   new  Promise  (function (resolve,reject){                setTimeout(()=>{                    resolve(callback.call(null,m+n))                },500)            })        }        async  function  addFn(){            let  res1=await  async_add(1,2,function(num){                console.log(num);                return   num;            })            let res2 = await async_add(res1, 3, function(num) {                console.log(num);                return num            })            let res3 = await async_add(res2, 5, num => {                console.log(num);                return num;            })            let res4 = await async_add(res3, 10, num => {                console.log(num);                return num;            })        }        addFn() 
         最后一次会输出  3  6  11   21复制代码

最后提一点的就是如果当我们使用async异步函数,报错的时候,我们应该如何那拿到错误的信息呢,所以这就要用到了 try catch了,请看下面代码

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}
errorDemo()复制代码

以上就是个人总结,谢谢大家!