이 기사에서는 주로 Promise 사용 방법에 대한 기본 튜토리얼을 공유합니다. 개인적으로 이해한 바는 동기 프로그래밍을 사용하여 비동기 프로그래밍 작업을 완료하는 것입니다. 그것이 모두에게 도움이 되기를 바랍니다.
const promise = new Promise((resolve, reject) => {
//some asynchronous code
setTimeout(() => {
console.log('执行完成');
resolve('some data');
}, 2000);
});Promise는 함수를 매개변수로 받습니다. 이 함수에는 두 개의 매개변수인 resolve와 reject가 각각 비동기 이후의 성공적인 콜백 함수를 나타냅니다. 작업이 실행되고 실패 콜백 함수가 나타납니다. Promise 接收一个函数作为参数，函数有两个参数，resolve 和 reject 分别表示异步操作执行后成功的回调函数和失败的回调函数。
Promise 实例后马上执行。所以通常采用一个函数包含它
function runAsync() {
return new Promise((resolve, reject) => {
//some asynchronous code
setTimeout(() => {
console.log('执行完成');
resolve('some data');
}, 2000);
});
}
runAsync().then((data) => {
console.log(data);//可以使用异步操作中的数据
})runAsync() 执行完调用 then 方法，then() 就相当于我们之前写的回调函数。
function paramTest(){
return new Promise((resolve, reject) => {
let number = Math.ceil(Math.random() * 10);
if (number < 5) {
resolve(number);
}else{
reject('out of range');
}
})
}
paramTest().then((number) => {
console.log('resolved');
console.log(number);
},(reason) => {
console.log('rejected');
console.log(reason);
})Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）
paramTest() 例子有两种情况：
当 number < 5 时，我们认为是成功情况，将状态从 pending 变为 fulfilled
当 number >= 5 时，我们认为是失败情况，将状态从 pending 变为 rejected
所以paramTest() 的执行结果：
| fulfilled | rejected |
|---|---|
| resolved | rejected |
| number | out of range |
我们继续调用 paramTest 方法举例
paramTest().then((number) => {
console.log('resolved');
console.log(number);
console.log(data); //data为未定义
},(reason) => {
console.log('rejected');
console.log(reason);
}).catch((err) => {
console.log(err);
})catch 方法其实就是 .then(null, rejection) 的别名，也是用来处理失败失败的回调函数，但是还有一个作用：当 resolve 回调中如果出现错误了，不会堵塞，会执行 catch 中的回调。
const p = Promise.all([p1, p2, p3]);
p.then(result => {
console.log(result);
})all方法接收一个数组参数，数组中每一项返回的都是Promise对象，只有当p1, p2, p3都执行完才会进入then回调。p1, p2, p3返回的数据会以一个数组的形式传到then回调中。
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p1');
}, 1000);
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p2');
}, 3000);
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//3秒后输出['p1', 'p2']const p = Promise.race([p1, p2, p3]);
p.then(result => {
console.log(result);
})race的用法与all如出一辙，不同的是all方法需要参数的每一项都返回成功了才会执行then;而race则是只要参数中的某一项返回成功就执行then回调。以下是
race的例子，和allPromise는 인스턴스화 후 즉시 실행됩니다. 그래서 일반적으로 함수를 사용하여 이를 담습니다
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p1');
}, 1000);
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p2');
}, 3000);
})
.then(result => result)
.catch(e => e);
Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 'p1'runAsync() 실행 후 then 메서드가 호출되고 then()은 콜백 함수 이전에 작성한 것과 동일합니다.
Promise에는 보류 중(진행 중), 이행(성공) 및 세 가지 상태가 있습니다. 거부됨 (실패)
paramTest() 예에는 두 가지 상황이 있습니다.
pending에서 fulfilledpending에서 rejected
paramTest() 실행 결과: | fulfilled | rejected | tr>
|---|---|
| 해결됨 | 거부됨 |
| 번호 | 범위를 벗어남 |
예를 들어paramTest메서드를 계속 호출합니다. 예를 들어all
rrreeeall메소드의 사용은 배열 매개변수를 받습니다. 배열의 각 항목은Promise객체를 반환합니다. >p1, p2, p3는 모두 실행될 때까지then콜백을 입력하지 않습니다.p1, p2, p3에서 반환된 데이터는 배열 형식으로then콜백에 전달됩니다. rrreeerace
rrreeerace의 사용법은all과 완전히 동일합니다. 차이점은all입니다. code> 메소드에서는then이 매개변수의 각 항목이 성공적으로 반환된 경우에만 실행되며race는 매개변수가 성공적으로 반환되었습니다.다음은
이 기사에 포함된 예제의 소스 코드를 보려면 여기를 클릭하세요.🎜🎜resloader는 이미지를 미리 로드하고 로드 진행 상황을 표시하는 Promise 기반 플러그인입니다. 자세한 내용을 보려면 여기를 클릭하세요. 괜찮다면 별표를 표시해 주세요🎜🎜관련 권장 사항: 🎜🎜🎜🎜Promise를 사용하여 콜백 단순화🎜🎜🎜🎜WeChat 애플릿 Promise 단순화된 콜백 예제 공유🎜🎜🎜🎜jQuery Promise를 올바르게 사용하는 방법🎜🎜race의 예입니다.all메소드와 비교해 보면 반환값에 확연한 차이가 있는 것을 알 수 있습니다. rrreee
위 내용은 Promise의 기본 사용법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
