Promise简单使用

Promise

Promise出现为了解决什么问题?
Promise出现时为了解决异步请求中的回调地域问题:它是一种设计模式,ES6中提供的内置类Promise,实现了这种模式。
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise以便在未来某个时候把值交给使用者。

一个 Promise 必然处于以下几种状态之一:

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 意味着操作成功完成。
  • 已拒绝(rejected): 意味着操作失败。
    [[PromiseState]]: “pending” 记录状态
    [[PromiseResult]]: undefined 记录成功结果或者失败原因
let p1 = new Promise((resolve,reject)=>{
  console.log(1)
})
console.log(2)

// 1 
// 2

let p1 = new Promise((resolve,reject)=>{
	setTimeout(_=>{
		 console.log(1)
	})
  console.log(2)
})
console.log(3)

// 2
// 3
// 1

注意:Promise本身是同步执行的,但是我们通常会在其中来处理异步操作

let p1 = new Promise((resolve,reject)=>{
 	resolve() // 操作成功执行的函数
 	reject() // 操作失败执行的函数
 	// 这个两个函数将会改变PromiseState状态和PromiseResult的值
 	// 两个函数只能执行一个,因为状态被改变后面的将不会生效
})

注意:如果一个 promise 已经被兑现(fulfilled)或被拒绝(rejected),那么我们也可以说它处于已敲定(settled)状态。 ** 在执行 resolve() 或者reject() 不会生效。**

then() 设置成功或者失败后的处理方法
let p1 = new Promise((resolve,reject)=>{
	setTimeout(_=>{
		 resolve('ok') // 操作成功执行的函数
	},1000)
})
p1.then((resolve)=>{
	// 成功后执行的方法
},(reject)=>{
	// 失败后执行的方法
})

通过then方法在同步代码执行中把我们Promise成功或者失败要执行的函数存放起来(此时函数没有执行),等到Promise状态改变后在执行相应函数

注意:
let p1 = new Promise((resolve,reject)=>{
 	console.log(1)
	resolve('ok')  // resolve和reject函数是异步的
	console.log(2)
})
p1.then((resolve)=>{
	console.log(resolve)
},(reject)=>{
	// 失败后执行的方法
})
console.log(3)
// 1
// 2 
// 3
// ok

不论resolve和reject函数是否在异步方法中,都需要等到then函数执行完毕,把方法存储完成后才会执行

then() 方法链式编程

由于 then 方法会返回 promise,它们可以被链式调用

let p1 = new Promise((resolve,reject)=>{
 	setTimeout(_=>{
		 resolve('ok') // 操作成功执行的函数
	},1000)
})
p1.then((resolve)=>{
	console.log(resolve)
},(reject)=>{
	// 失败后执行的方法
}).then((resolve)=>{
	console.log(resolve)
},(reject)=>{
	// 失败后执行的方法
})

** 注意:遇到一个then,要执行的成功或者失败的方法,如果此方法没有在当前then中定义,那么顺延到第二个then中执行。

catch()

catch() 方法返回一个Promise,并且处理拒绝的情况。它的行为与调用Promise.prototype.then(null,(reject)=>{}) 相同

let p1 = new Promise((resolve,reject)=>{
	resolve(a)
}).catch((reject)=>{

})
Promise.reject()

Promise.reject()方法返回一个带有拒绝原因的Promise对象。

Promise.resolve

Promise.resolve返回一个成功的Promise对象。

Promise.all()

Promise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例。
**注意:只有等于所有的promise状态都为成功,那个返回的Promise实例状态才成成功;但只要有一项失败,状态为失败 **

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
});
Promise.all()

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。
** 注意:其中谁的状态先改变,那个返回的Promise实例状态就是它;**

var p3 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) {
    setTimeout(reject, 500, "four");
});

Promise.race([p3, p4]).then(function(value) {
  console.log(value); // "three"
  // p3 更快,所以它完成了
}, function(reason) {
  // 未被调用
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值