一、Promsie的基本用法
创建 Promise 实例:
const promise = new Promise((resolve, reject) => {
// 这里是异步操作的逻辑
if (/*异步操作返回正常结果*/) {
resolve(/*返回的结果*/);
} else {
reject(/*返回错误信息*/);
}
});
在创建 Promise 实例的时候,需要传入一个 function,这个 function 会在实例化过程中被立即执行。函数接收两个参数,一个是成功时返回的结果(resolve),一个是失败时返回的错误信息(reject)。
使用 Promise 实例:
promise.then((result) => {
// 处理成功的结果
}).catch((error) => {
// 处理失败的结果
});
Promise 实例有两个方法:then 和 catch,可以分别处理 Promise 的成功和失败。在 then 方法中可以通过形参获取 Promise 成功时返回的结果,在 catch 方法中可以获取 Promise 失败时返回的错误信息。
二、Promise的链式调用
Promise 实例可以通过链式调用的方式进行逻辑处理。
链式调用示例:
promise1()
.then(result1 => {
return promise2(result1)
})
.then(result2 => {
return promise3(result2)
})
.then(result3 => {
// 成功的逻辑处理
})
.catch(error => {
// 失败的逻辑处理
})
链式调用的时候,每个 then 方法返回的都是一个 Promise 实例。返回的 Promise 状态依赖于当前 then 方法的返回值(reject 或 resolve)。如果 then 方法中没有返回任何值,那么返回的 Promise 状态将会一直处于等待中。
三、Promise.all()
Promise.all() 方法接收一个 Promise 实例的可迭代对象,并且当所有迭代中的 Promise 实例都成功时返回一个成功的 Promise 实例。如果其中一个 Promise 实例失败,则直接返回一个失败的 Promise 实例。
Promise.all() 示例:
Promise.all([promise1(), promise2(), promise3()])
.then(([result1, result2, result3]) => {
// 三个 Promise 实例都成功,返回值分别为 result1,result2,result3
// 处理逻辑
})
.catch(error => {
// 其中一个 Promise 实例失败,返回失败信息
// 处理逻辑
})
四、Promise.race()
Promise.race() 方法接收一个 Promise 实例的可迭代对象,并且当其中第一个 Promise 实例状态变更时,直接返回一个相应状态的 Promise 实例。
Promise.race() 示例:
Promise.race([promise1(), promise2(), promise3()])
.then(result => {
// 其中一个 Promise 实例成功,返回值为该实例的值
// 处理逻辑
})
.catch(error => {
// 其中一个 Promise 实例失败,返回失败信息
// 处理逻辑
})
五、Promise.resolve() 和 Promise.reject()
Promise.resolve() 和 Promise.reject() 方法用于直接返回一个成功或者失败的 Promise 实例。
Promise.resolve() 示例:
Promise.resolve('返回成功的结果')
.then(result => {
// 处理逻辑
});
Promise.reject() 示例:
Promise.reject('返回失败的结果')
.catch(error => {
// 处理逻辑
});
六、async/await
async/await 是 ES6 语法中新引入的异步编程解决方案,是对 Promise 的更高级的封装。
async 关键字用于定义一个异步函数。
async 函数内部使用 await 等待一个 Promise 实例返回结果。
在一个异步函数中使用 try 和 catch 可以将 Promise 实例返回的错误信息捕获并且进行处理。
async/await 示例:
async function getData() {
try {
const result = await fetch('http://example.com/data.json');
const data = await result.json();
return data;
} catch (error) {
console.error('getData error:', error);
throw error;
}
}
getData().then((result) => {
// 处理逻辑
}).catch((error) => {
// 处理逻辑
});
以上是 ES6 Promise 的用法及相关示例的详细阐述。通过学习和使用 Promise,可以使我们更好地处理异步操作,使代码更加清晰,逻辑更加易于理解。