promise、async、await是什么意思-创新互联
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
在成都网站设计、做网站过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联公司还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。这期内容当中小编将会给大家带来有关promise、async、await是什么意思,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
宏任务与微任务都是异步的,其中包括ajax请求、计时器等等,我们初步的了解一下promise,知道他是解决异步的一种方式,那么我们常用的一共有哪几种方法呢?
因为涉及的知识点比较多,这篇文章主要是讲一下,回调函数和promise:
一、回调函数
先上代码: function f2() { console.log('2222') } function f1(callback){ console.log('111') setTimeout(function () { callback(); }, 5000); console.log('3333') } f1(f2); 先看下打印值是: 111 3333 五秒后2222
相当于主线程执行完了,会通过回调函数去调用f2函数,这个没什么毛病。但是看下下面的例子:
现在我们读取一个文件,fileReader就是一个异步请求 // 这个异步请求就是通过回调函数的方式获取的 var reader = new FileReader() var file = input.files[0] reader.readAsText(file, 'utf-8',function(err, data){ if(err){ console.log(err) } else { console.log(data) } })
现在看起来也很不错,但是如果文件上传出错了,我们还要在回调里面做判断,要是我们读取完这个文件接着要读取多个文件呢?是不是应该这么写:
读取完文件1之后再接着读取文件2、3 var reader = new FileReader() var file = input.files[0] reader.readAsText(file1, 'utf-8',function(err1, data1){ if(err1){ console.log(err1) } else { console.log(data1) } reader.readAsText(file2, 'utf-8',function(err2, data2){ if(err2){ console.log(err2) } else { console.log(data2) } reader.readAsText(file3, 'utf-8',function(err3, data3){ if(err3){ console.log(err3) } else { console.log(data3) } }) }) })
这么写可以实现需求,但是这个代码的可读性就比较差,看起来就不那么优雅,也就是我们常说的‘回调地狱’。那么怎么破解这种嵌套式的回调呢?ES6为我们提供了promise:
二、promise
首先我们从字面意思上理解一下什么是promise?promise可以翻译成承诺、保证,这个地方你可以理解为:
女朋友让我干了一件事,虽然还没干完,但是我保证这件事会有一个结果给你,成功(fulfiled)或者失败(rejected),还有一个等待状态(pending)。
还是先上例子 let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(2000) // 成功以后这个resolve会把成功的结果捕捉到 // reject(2000) // 失败以后这个reject会把失败的结果捕捉到 }, 1000) console.log(1111) }) promise.then(res => { console.log(res) // then里面第一个参数就能拿到捕捉到的成功结果 }, err =>{ console.log(res)// then里面第二个参数就能拿到捕捉到的失败结果 }) 打印结果: 1111 2000(一秒以后)
1、then链式操作
Promise对象的then方法返回一个新的Promise对象,因此可以通过链式调用then方法。
then方法接收两个函数作为参数,第一个参数是Promise执行成功时的回调,第二个参数是Promise执行失败时的回调,这个上面的例子说的很明白了,第二个参数捕捉的就是失败的回调。
两个函数只会有一个被调用,这句话怎么理解呢?
女朋友让你去做西红柿鸡蛋汤,你要么就去做,要么就不做,叫外卖,肯定没有第三种选择。
函数的返回值将被用作创建then返回的Promise对象。这句话应该怎么理解呢?还是上例子:
let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(2000) }, 1000) console.log(1111) }) promise.then(res => { console.log(res) // 这个地方会打印捕捉到的2000 return res + 1000 // 这个函数的返回值,返回的就是这个promise对象捕捉到的成功的值 }).then(res => { console.log(res) //这个地方打印的就是上一个promise对象return的值 }) 所以打印顺序应该是: 1111 2000 3000
刚才我们看到了then接受两个参数,一个是成功的回调、一个是失败的回调,看起来好像也不是那么优雅,promise里除了then还提供了catch方法:
2、catch捕捉操作
这个catch就是专门捕捉错误的回调的,还是先看例子:
let promise = new Promise((resolve, reject) => { setTimeout(() => { reject(2000) // 失败以后这个reject会把失败的结果捕捉到 }, 1000) console.log(1111) }) promise.catch(res => { console.log(res) // catch里面就能拿到捕捉到的失败结果 }) 打印结果: 1111 2000(一秒以后)
除了then和catch之外,promise还有两个语法,all和race,我们也简单用一下:
3、all
现在我们有这么一个需求,一共有三个接口A、B、C,必须三个接口都成功以后,才能发起第四个请求,怎么实现呢?
链式调用
let getInfoA = new Promise((resolve, reject) => { console.log('小A开始执行了') resolve() }).then(res => { let getInfoB = new Promise((resolve, reject) => { console.log('小B开始执行了') resolve() }).then(res => { let getInfoC = new Promise((resolve, reject) => { console.log('小C开始执行了') resolve() }).then(res => { console.log('全都执行完了!') }) }) })
一层套一层的,好像不是那么优雅
all
let getInfoA = new Promise((resolve, reject) => { console.log('小A开始执行了') resolve() }) let getInfoB = new Promise((resolve, reject) => { console.log('小B开始执行了') resolve() }) let getInfoC = new Promise((resolve, reject) => { console.log('小C开始执行了') resolve() }) Promise.all([getInfoA, getInfoB, getInfoC]).then(res => { console.log('全都执行完了!') })
接收一个Promise对象组成的数组作为参数,当这个数组所有的Promise对象状态都变成resolved或者rejected的时候,它才会去调用then方法。非常完美,非常优雅。
4、race
现在又有一个需求,同样是接口A、B、C,只要有一个响应了,我就可以调接口D,那么怎么实现呢?
1、传统方式
let getInfoA = new Promise((resolve, reject) => { console.log('小A开始执行了') setTimeout((err => { resolve('小A最快') }),1000) }).then(res =>{ console.log(res) }) let getInfoB = new Promise((resolve, reject) => { console.log('小B开始执行了') setTimeout((err => { resolve('小B最快') }),1001) }).then(res =>{ console.log(res) }) let getInfoC = new Promise((resolve, reject) => { console.log('小C开始执行了') setTimeout((err => { resolve('小C最快') }),1002) }).then(res =>{ console.log(res) }) 打印结果 小A开始执行了 小B开始执行了 小C开始执行了 小A最快
这个方法得写三遍,好像也不是那么优雅,一起来看下race应该怎么写?
2、race
let getInfoA = new Promise((resolve, reject) => { console.log('小A开始执行了') setTimeout((err => { resolve('小A最快') }),1000) }) let getInfoB = new Promise((resolve, reject) => { console.log('小B开始执行了') setTimeout((err => { resolve('小B最快') }),1001) }) let getInfoC = new Promise((resolve, reject) => { console.log('小C开始执行了') setTimeout((err => { resolve('小C最快') }),1002) }) Promise.race([getInfoA, getInfoB, getInfoC]).then(res => { console.log(res) }) 打印结果 小A开始执行了 小B开始执行了 小C开始执行了 小A最快
与Promise.all相似的是,Promise.race都是以一个Promise对象组成的数组作为参数,不同的是,只要当数组中的其中一个Promsie状态变成resolved或者rejected时,就可以调用.then方法了。
promise是ES6用来解决异步的一个方法,现在用的已经比较广泛了,像我们经常用的axios,他就是用promise封装的,用起来非常方便。
上述就是小编为大家分享的promise、async、await是什么意思了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联-成都网站建设公司行业资讯频道。
分享标题:promise、async、await是什么意思-创新互联
网页路径:http://scyanting.com/article/dpssog.html