Promise是一种处理异步操作的一种对象(包装异步操作的结果),提供了一种统一的方式来处理成功值或者失败原因。Promise对象有三种状态,pending(进行中)、fulfilled(已成功)和rejected(已失败)三种状态
状态管理:Promise对象的状态表示异步操作的状态,一旦状态从pending变为fulfilled或rejected,就不会再改变。
链式调用:通过.then()
和.catch()
方法,Promise支持链式调用,使得异步操作的结果可以依次传递和处理,形成清晰的异步流程。
错误处理:Promise通过.catch()
方法捕获并处理链式调用中的错误,提供了一种统一的错误处理机制。
接下来看代码已经具体场景帮助理解:
function maPromise() {
return new Promise((resolve,reject)=>{
// 模拟异步操作,如网路请求,这里使用定时器
setTimeout(() => {
const success = Math.random() > 0.5; // 随机决定操作是否成功
if (success) {
resolve('操作成功');
} else {
reject('操作失败');
}
}, 1000);
})
}
maPromise().then(result=>{
console.log(result); // 如果success为真,则resolve调用,promise的状态转换为fulfilled
// 打印结果为 '操作成功'
}).catch(error=>{
console.log(error); // 如果success为真,则resolve调用,promise的状态转换为rejected
// 打印结果为“操作失败”
})
这是一个简单的Promise,有兴趣的小伙伴可以改变一下success的值,验证一下失败的打印结果
async/await
async/await(ES7)属于是Pormise对象的语法糖,感觉应该放在这里进行描述。它的出现使得异步代码的编写和阅读更加直观和易于理解。
async
- 定义:
async
用于声明一个异步函数。异步函数是指通过事件循环异步执行的函数,它会返回一个Promise对象。 - 用法:在函数定义前加上
async
关键字,即可将该函数标记为异步函数。异步函数内部可以使用await
来等待一个Promise对象的结果。 - 返回值:异步函数总是返回一个Promise对象。如果函数返回的是一个非Promise类型的数据,则Promise的状态为fulfilled成功;如果抛出异常,则Promise的状态为rejected失败。
await
- 定义:
await
是一个操作符,用于等待一个Promise对象解决(resolve)并返回其结果。 - 用法:
await
只能在async
函数内部使用。它右侧的表达式一般为Promise对象,它会暂停async
函数的执行,直到Promise对象解决并返回其结果。 - 返回值:
await
返回的是Promise对象解决后的值。
接下来看代码已经具体场景帮助理解:
大家可以对比一下这两段代码,直接使用Promise和使用async/await
fetch(`/api1/search/users2?q=${value}`).then((res)=>{
// console.log(res.json(),'chengogng');
return res.json();
}
).then(res=>{
console.log('获取数据成功了',res);
}).catch((err)=>{
// 统一处理错误
console.log(err);
})
search = async () => {
try {
const response = await fetch(`/api1/search/users2?q=${value}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.log('请求出错',error);
}
};
这是对fetch请求(ES6)的一个例子,本身fetch调用之后返回值是一个Promise,第一种方式,如果请求成功了,调用then方法来获取成功之后的值,切记要调用json()方法,然后调用catch方法兜底处理错误;
第二种方式:声明了search为一个Promise函数,await操作符用来等待这个函数的返回结果(respoonse),使用try/catch为了捕获请求错误;
关于fetch请求和xhr请求:【JavaScript】XHR请求和fetch请求详解-CSDN博客
这里是一个简单的Promise习题:可以在评论区验证自己的答案奥(有宏任务和微任务)
const first = () => (new Promise((resolve, reject) => {
console.log(3);
let p = new Promise((resolve, reject) => {
console.log(7);
setTimeout(() => {
console.log(5);
resolve(6);
}, 0)
resolve(1);
});
resolve(2);
p.then((arg) => {
console.log(arg);
});
}));
first().then((arg) => {
console.log(arg);
});
console.log(4);