博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
async/await 来处理异步
阅读量:6161 次
发布时间:2019-06-21

本文共 2783 字,大约阅读时间需要 9 分钟。

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()复制代码

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

转载地址:http://jzgfa.baihongyu.com/

你可能感兴趣的文章
VCL组件之重要的公用属性
查看>>
异常球称重问题
查看>>
java 十六进制数的转换
查看>>
Divide and conquer method
查看>>
[sharepoint]根据用户名获取该用户的权限
查看>>
多线程模拟实现生产者/消费者模型 (借鉴)
查看>>
iOS开发需要哪些图片?
查看>>
命令行远程链接MySQL
查看>>
logstash向elasticsearch写入数据,如何指定多个数据template
查看>>
Node.js:Web模块、文件系统
查看>>
【转】灵活运用 SQL SERVER FOR XML PATH
查看>>
WCF角色服务
查看>>
常用sql001_partition by 以及 row_number()和 dense_rank()和rank()区别
查看>>
已开源|码上用它开始Flutter混合开发——FlutterBoost
查看>>
原地踏步 – 没有突破高效理念的结果
查看>>
“间谍”软件克星Ad-Aware
查看>>
终端服务器超出了最大允许连接数
查看>>
ansible软件模块参数
查看>>
vue-amap - 基于Vue2.0和高德地图的地图组件
查看>>
Windows Tips
查看>>