一、Promise基础介绍
在JavaScript中,Promise是一种用于异步编程的技术,与回调函数相比,使用Promise编写的代码更加简洁易懂,而且支持链式调用,更加符合代码风格的美观优雅。
Promise是一种代表了未来某个时间点完成的可能性的对象,可以用来处理异步操作。Promise有三种状态,分别是“等待态”(pending)、“完成态”(fulfilled)和“拒绝态”(rejected),一旦Promise状态变为“完成态”或“拒绝态”,就不能再改变了。
//Promise的基本用法
const promise = new Promise((resolve, reject) => {
//模拟异步操作
setTimeout(() => {
const data = {name: 'tom', age: 20}
resolve(data) //异步操作成功时,调用resolve方法
//reject('error') //异步操作失败时,调用reject方法
}, 2000)
})
//使用Promise的then方法处理异步完成情况
promise.then((data) => {
console.log(data)
}).catch((error) => {
console.log(error)
})
二、Promise的链式调用
除了能够处理异步操作,Promise还具备一种非常强大的功能——链式调用,也称为Promise链。当需要对多个异步操作进行处理时,就可以使用Promise链。
通过链式调用,Promise对象可以根据成功或失败状态返回的值进行后续操作,实际上是then方法返回了一个新的Promise对象,因此可以连续使用then方法。
//Promise链式调用
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 2000)
})
promise.then((res) => {
console.log(res) //2
return res * 2
}).then((res) => {
console.log(res) //4
return Promise.resolve(res * 2)
}).then((res) => {
console.log(res) //8
}).catch((error) => {
console.log(error)
})
三、Promise.all()
当有多个异步操作需要执行,并且所有异步操作都完成后需要执行某种操作时,可以使用Promise.all()方法,该方法接收一个Promise对象数组,当所有对象状态都变为“完成态”时返回结果的数组,如果有一个对象状态变为“拒绝态”,则会直接跳转至catch()方法。
需要注意的是,Promise.all()方法返回的结果数组顺序与输入的Promise对象数组顺序相同。
//Promise.all()用法
const promise1 = Promise.resolve('Hello')
const promise2 = 10
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'Goodbye')
})
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values) //['Hello', 10, 'Goodbye']
}).catch((error) => {
console.log(error)
})
四、Promise.race()
与Promise.all()类似,Promise.race()方法也是接收一个Promise对象数组,不同的是当任意一个Promise对象的状态变为“完成态”或“拒绝态”时,返回结果并结束操作。
需要注意的是,Promise.race()方法返回的结果是第一个完成或拒绝的Promise对象的结果。
//Promise.race()用法
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'Goodbye')
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'Hello')
})
Promise.race([promise1, promise2]).then((value) => {
console.log(value) //'Hello'
}).catch((error) => {
console.log(error)
})
五、async/await与Promise
ES2017发布了async/await语法,这是一个新的异步函数定型,可以让异步操作同步化,更加符合人们的正常思维方式。
async/await通过使函数返回一个Promise对象,让代码的执行顺序与Promise进行结合,可以让异步操作更加简单明了。
//async/await的基本用法
const fetchUserData = async (url) => {
const response = await fetch(url) //等待异步操作完成
const data = await response.json() //等待异步操作完成
return data.name //返回结果
}
fetchUserData('https://api.github.com/users/octocat').then((data) => {
console.log(data) //'The Octocat'
}).catch((error) => {
console.log(error)
})
六、Promise的错误处理
当Promise对象状态变为“拒绝态”时,需要进行错误处理,可以通过在链式调用中使用catch()方法来完成。
需要注意的是,如果任何一个异步操作抛出错误或返回reject()方法,Promise对象会立即变为“拒绝态”状态,直接跳转至链式调用中的catch()方法,因此catch()方法需要放在链式调用的最后。
//Promise的错误处理
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject('error')
}, 2000)
})
promise.then((res) => {
console.log(res)
}).catch((error) => {
console.log(error) //'error'
})