博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
promise的用法以及注意事项,看了这篇你就会了
阅读量:5873 次
发布时间:2019-06-19

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

一,为什么要使用promise,ta能解决那些问题?

Promise 是异步编程的一种解决方案: 从语法上讲,Promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会(resolve)给你一个结果。ta有三种状态:pending(等待态)fulfiled(成功态)rejected(失败态),一旦状态有pending状态转为后两者之一就不可逆转,也就是说成功和失败之间是不可转换的。new一个promise之后,ta就是会立即执行。 看代码:

let P = new Promise((resolve,reject) => {  setTimeout(() => {    resolve(1)  }, 3000)});P.then(data => {  console.log(data)}, err => {})复制代码

说明: 这里new了一个Promise,new Promise(execut);这里的execut会立即执行。p.then也会立即执行,这个then究竟做了什么呢?后面会说!

我们再来说一下在没有Promise之前,我们写代码经常遇到的一个问题(回调地狱):

function fn(a,cb){    setTimeout(() => {        a = 10 * Math.random()        cb(a)           //这里就是cb需要等待    },300)}function fn1(c){    if(c>5){        console.log(c)    }else{        console.log('值偏小')    }}fn(0,fn1)复制代码

有时候我们为了等待某个值需要嵌套很多层,这样为了解决这个问题Promise就应运而生了,Promise是用来解决以下几个问题的:

  1. 解决多层嵌套问题,也就是我们常说的回调地狱(then);
  2. 解决多个异步 请求问题(all,race)

我们来看看用promise怎么写上面的代码:

let p1 = new Promise((resolve, reject)=>{    setTimeout(() => {        a = 10 * Math.random()        resolve(a)           //这里就是cb需要等待    },300)})p1.then(data => {    fn1(data)})复制代码

特别是多层嵌套的时候,Promise的好处将更加明显!


二,下面跟着我一起学习一下Promise的常见用法吧!

Promise是一个构造函数,自己身上有reject,resolve,all,race这几个方法,原型上有then、catch等方法。

Promise的构造函数接收一个参数:函数(执行器,这个执行器是立即执行的),并且这个函数需要传入两个参数:

  • resolve :异步操作执行成功后的回调函数
  • reject:异步操作执行失败后的回调函数 你需要注意的是 在Promise的执行器里面必须要有resolve,或者reject这两个回调函数执行。通过resolve或则reject来改变Promise的状态为成功或者失败,并且执行then里面的成功函数或者失败的函数。

then 链式操作的用法

从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用传递状态的方式来使得回调函数队列能够及时调用,所以使用Promise的正确场景是这样的:

function fn1(c){    if(c>5){        console.log(c)    }else{        console.log('值偏小')    }}let p1 = new Promise((resolve, reject)=>{    setTimeout(() => {        a = 10 * Math.random()        resolve(a)           //这里就是cb需要等待    },300)})p1.then(data => {    fn1(data)    return data}).then((data) => {    console.log(data)   //1.333}).then((data) => {    console.log(data)   //undefined})复制代码

这里顺带讲一下 then的传递:如果then里面的回调返回的是一个Promise,那么就将这个Promise的resolve的值传递给下一个then的data值,如果返回的是一个普通值,那么就将这个普通值传递给下一个then的data值,例如上面的结果。

reject的用法

将Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。这里就不再详细叙述。

catch的用法

它是做什么用的呢?其实它和then的第二个参数一样,用来指定reject的回调。这里就不再详细叙述。

all的用法

let Promise1 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(1)    },300)    })let Promise2 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(2)    },200)})let Promise3 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(3)    },100)})let p = Promise.all([Promise1, Promise2, Promise3])p.then((data) => {    console.log(data)    //[1,2,3]   这里的顺序和all的顺一样,和异步回调执行得到结果的顺序无关  // 三个都成功则成功  }, function(){  // 只要有一个失败,则失败 })复制代码

有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,是不是很方便!

race的用法

let Promise1 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(1)    },300)    })let Promise2 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(2)    },200)})let Promise3 = new Promise(function(resolve, reject){    setTimeout(() => {        resolve(3)    },100)})let p = Promise.race([Promise1, Promise2, Promise3])p.then((data) => {    console.log(data)  // 三个都成功则成功  }, function(){  // 只要有失败,则失败 })复制代码

以最先得到的结果为准,即使如果最先拿回来的是reject的结果,那么race就是reject的结果。


好了,promise的常见用法就这些,下一篇我们来聊聊promise的源码!

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

你可能感兴趣的文章
通用sqlserver分页存储过程
查看>>
(转载)C#提取汉字拼音首字母的方法
查看>>
PXE-cobbler 无人值守装机------续
查看>>
关于-O0、O1、O2、O3优化
查看>>
ajax笔记
查看>>
布局模型
查看>>
Jquery弹窗
查看>>
生日小助手
查看>>
bzoj 2194 快速傅立叶之二
查看>>
51nod 1443 路径和树——最短路生成树
查看>>
17th, Jan 2012 今天的时间表
查看>>
[精华][推荐]CAS SSO 实现单点登录实例源码
查看>>
IIS 部署WCF时遇到这么个错:
查看>>
VSS Teamwork 环境架设[文章汇编集]
查看>>
VC++ 在两个程序中 传递字符串等常量值的方法:使用了 WM_COPYDATA 消息的
查看>>
拓扑资料
查看>>
x86_64平台编译链接汇编程序
查看>>
POJ3126 Prime Path(BFS)
查看>>
VC6.0多线程例程
查看>>
Unity 3D-AR开发-Vuforia教程手册
查看>>