js) Promise
18705 ワード
-(非同期処理とは、JavaScriptの特性であり、特定のコードの実行が完了するのを待つのではなく、次のコードを先に実行する)
きほんコード
//ajax 통신 api를 이용하여 지정된 url의 1번상품 데이터를 받아오는 코드
function getData(callbackFunc){
$.get('url/products/1', function(response) {
callbackFunc(response); // 서버에서 받은 response값을 callback 함수에 넘겨줌
});
}
コードfunction getData(callback){
// new Promise() 추가
return new Promise(function(resolve, reject) {
$.get('url/products/1', function(response){
// 데이터를 받으면 resolve() 호출
resolve(response);
})
})
}
//getData() 의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
//resolve()의 결과값이 여기로 전달
console.log(tableData); // $.get() 의 response 값이 tableData에 전달됨
});
3つの状態
保留中(保留中)
new Promise();
// new Promise() 메서드 호출시 콜백함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
new Promise(function(resolve, reject){
})
Fulfilled(実行)
new Promise(function(resolve, reject){
resolve();
})
function getData(){
return new Promise(function(resolve, reject) {
var data = 100;
resolve(data);
});
}
// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData){
console.log(resolvedData); //100
})
Rejected(失敗)
呼び出し
new Promise(function(resolve, reject){
reject();
});
function getData(){
return new Promise(function(resolve, reject) {
reject(new Error("Request is failed"));
});
}
// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err){
console.log(err);
})
Premisコード例(1)
function getData() {
return new Promise(function(resolve, reject) {
$.get('url/products/1', function(response) {
if (response) {
resolve(response);
}
reject(new Error("Request is failed"));
});
});
}
// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
console.log(data); // response 값 출력
}).catch(function(err) {
console.error(err); // Error 출력
});
Premisコード例(2)
new Promise(function(resolve, reject){
setTimeout(function() {
resolve(1); // 여기서 1 값을 가지고 then으로
}, 2000);
})
.then(function(result) {
console.log(result); // 1
return result + 10;
})
.then(function(result) {
console.log(result); // 11
return result + 20;
})
.then(function(result) {
console.log(result); // 31
});
ソース:https://joshua1988.github.io/web-development/javascript/promise-for-beginners/Reference
この問題について(js) Promise), 我々は、より多くの情報をここで見つけました https://velog.io/@pji3504/js-Promiseテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol