【前端】Promise

一 概述

Promise是用来写JavaScript编程中的异步代码的。下面举个最贱简单的例子

// 定外卖就是一个Promise,Promist的意思就是承诺
// 我们定完外卖,饭不会立即到我们手中
// 这时候我们和商家就要达成一个承诺
// 在未来,不管饭是做好了还是烧糊了,都会给我们一个答复
function 定外卖(){
    // Promise 接受两个参数
    // resolve: 异步事件成功时调用(菜烧好了)
    // reject: 异步事件失败时调用(菜烧糊了)
    return new Promise((resolve, reject) => {
        let result = 做饭()
	// 下面商家给出承诺,不管烧没烧好,都会告诉你
	if (result == '菜烧好了') 
	    // 商家给出了反馈
	    resolve('我们的外卖正在给您派送了')
	else 
	    reject('不好意思,我们菜烧糊了,您再等一会')
	})
}

// 商家厨房做饭,模拟概率事件
function 做饭() {
    return Math.random() > 0.5 ? '菜烧好了' : '菜烧糊了'
}

// 你在家上饿了么定外卖
// 有一半的概率会把你的饭烧糊了
// 好在有承诺,他还是会告诉你
定外卖()
    // 菜烧好执行,返回'我们的外卖正在给您派送了',这里then是可以有多个的
    .then(res => console.log(res))
    // 菜烧糊了执行,返回'不好意思,我们菜烧糊了,您再等一会'
    .catch(res => console.log(res))

二 Promise有什么用

我们首先从回调函数说起,通常用JS写异步任务的时候,会分成两个部分:主过程和后续过程,在主过程执行成功后,触发后续过程执行。比如,在实际编程中经常需要使用AJAX向服务器请求数据,成功获取到数据后,才开始处理数据。于是代码分成获取数据部分和处理数据部分,像下面这样:

getData((data) => {
  // 处理data
})

现在假设有多个异步任务,且任务间有依赖关系(一个任务需要拿到另一个任务成功后的结果才能开始执行)的时候,回调的方式写出来的代码就会像下面这样出现回调地狱:

getData1(data1 => {
  getData2(data1, data2 => {
    getData3(data2, data3 => {
      getData4(data3, data4 => {
        getData5(data4, data5 => {
          // 终于取到data5了
        })
      })
    })
  })
})

我们用promise可以这样写:

// 然后
getData1()
.then(getData2)
.then(getData3)
.then(getData4)
.then(getData5)
.then(data => {
  // 取到最终data了
})

三 Promise使用

1.三种状态

  • pending(待定)
  • fulfilled(已执行)
  • rejected(已拒绝)

fulfilled和rejected有可以说是已成功和已失败,这两种状态又归为已完成状态

2.promise内容

⑴构造函数
⑵实例方法
⑶静态方法

猜你喜欢

转载自blog.csdn.net/cheidou123/article/details/92199029