Promise의 기본 사용법에 대한 튜토리얼

이 기사에서는 주로 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() 就相当于我们之前写的回调函数。

resolve 和 reject

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject(&#39;out of range&#39;);
        }
    })
}
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

catch的用法

我们继续调用 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 中的回调。

all的用法

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']

race的用法

const p = Promise.race([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

race 的用法与 all 如出一辙，不同的是 all 方法需要参数的每一项都返回成功了才会执行 then;而 race 则是只要参数中的某一项返回成功就执行 then 回调。

以下是 race 的例子，和 all

Promise는 인스턴스화 후 즉시 실행됩니다. 그래서 일반적으로 함수를 사용하여 이를 담습니다

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()은 콜백 함수 이전에 작성한 것과 동일합니다.

해결 및 거부

rrreee

Promise에는 보류 중(진행 중), 이행(성공) 및 세 가지 상태가 있습니다. 거부됨 (실패)

paramTest() 예에는 두 가지 상황이 있습니다.

• Whennumber < 5, 성공으로 간주하고 pending에서 fulfilled

• when< When code>number로 상태를 변경합니다. >= 5, 우리는 이를 실패로 간주하고 상태를 pending에서 rejected

로 변경합니다. paramTest() 실행 결과: tr>

fulfilled	rejected
해결됨	거부됨
번호	범위를 벗어남

catch 사용법

예를 들어 paramTest 메서드를 계속 호출합니다. 예를 들어

rrreeecatch code> 메소드는 실제로 <code>.then(null, Rejection)의 별칭입니다. 이는 실패를 처리하는 데 사용되는 콜백 함수이기도 하지만 resolve 콜백 오류가 발생해도 차단되지 않고 <code>catch에 있는 콜백이 실행됩니다.

all

rrreee

all 메소드의 사용은 배열 매개변수를 받습니다. 배열의 각 항목은 Promise 객체를 반환합니다. >p1, p2, p3는 모두 실행될 때까지 then 콜백을 입력하지 않습니다. p1, p2, p3에서 반환된 데이터는 배열 형식으로 then 콜백에 전달됩니다. rrreee

race

rrreee

race의 사용법은 all과 완전히 동일합니다. 차이점은 all입니다. code> 메소드에서는 then이 매개변수의 각 항목이 성공적으로 반환된 경우에만 실행되며 race는 매개변수가 성공적으로 반환되었습니다.

다음은 race의 예입니다. all 메소드와 비교해 보면 반환값에 확연한 차이가 있는 것을 알 수 있습니다. rrreee

이 기사에 포함된 예제의 소스 코드를 보려면 여기를 클릭하세요.🎜🎜resloader는 이미지를 미리 로드하고 로드 진행 상황을 표시하는 Promise 기반 플러그인입니다. 자세한 내용을 보려면 여기를 클릭하세요. 괜찮다면 별표를 표시해 주세요🎜🎜관련 권장 사항: 🎜🎜🎜🎜Promise를 사용하여 콜백 단순화🎜🎜🎜🎜WeChat 애플릿 Promise 단순화된 콜백 예제 공유🎜🎜🎜🎜jQuery Promise를 올바르게 사용하는 방법🎜🎜

위 내용은 Promise의 기본 사용법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!