Promise를 사용하는 것은 JS 비동기 실행 중 콜백 함수 중첩 콜백 함수 문제를 해결하기 위한 것입니다.
는 new를 통해 Promise를 인스턴스화합니다. 생성자에는 두 개의 매개변수가 필요하며, 함수가 성공적으로 실행된 후 실행됩니다. 두 번째 함수 함수 실행 실패 후 실행될 함수를 거부합니다:
new Promise(function(resolve , reject) {
});Promise를 통해 콜백 함수를 계층별이 아닌 선형 방식으로 작성합니다. 레이어 콜백;
fn("args", function(a) {
fn1("foo", function(b) {
fn2("bar", function(c) {
fn3("baz", function(d) {
alert("回调成功，获知的内容为："+a+b+c+d)
})
})
})
})위 데모에는 성공한 콜백만 포함되어 있습니다.
Promise를 사용하면 선형으로 수정할 수 있습니다. 읽기 습관에 맞춰서
new Promise(function(resolve , reject) {
resolve(1);
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(2);
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(3);
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(4);
});
}).then(function(val) {
console.log(val);
});아래에 로직을 작성하세요. 이것은 ajax가 비동기적으로 데이터를 가져오는의 예입니다. 우리는 콜백 함수를 사용했습니다. ;
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var callback = function(res) {
console.log(res);
};
var ajax = function(url, callback) {
var r = new XMLHttpRequest();
r.open("GET", url, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
callback(data);
};
r.send();
};
//执行请求：
ajax("http://www.filltext.com?rows=10&f={firstName}", callback);
//再做别的事情；
</script>
</body>
</html>ES6에는 Promise가 내장되어 있으므로 위의 콜백을 promise 메서드로 다시 작성할 수 있습니다. 먼저 ajax 함수는 Promise 객체를 반환합니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var callback = function(res) {
console.log(res);
};
var ajax = function(url) {
return new Promise(function(resolve, reject) {
var r = new XMLHttpRequest();
r.open("GET", url, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
resolve(data);
};
r.send();
})
};
//执行请求：
ajax("http://www.filltext.com?rows=10&f={firstName}").then(function(data) {
callback(data);
});
//再做别的事情；
</script>
</body>
</html>인스턴스화된 각 Promise에는 보류 중(대기 중) 거부됨(거부됨) 해결됨(해결됨)의 세 가지 상태가 있습니다. Reject()가 실행되면 Promise의 상태는 거부되고 이 상태는 취소할 수 없습니다.
then 메소드는 두 개의 매개변수를 받습니다. 첫 번째는 함수의 성공 콜백이고, 두 번째는 함수의 실패 콜백입니다.
var promise = new Promise(function(resolve , reject) {
resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
console.log(1);
}, function() {
console.log("失败");
});
console.log("2");var promise = new Promise(function(resolve , reject) {
reject();
});
console.log(0);
promise.then(function(val) {
console.log(1);
}, function() {
console.log("失败");
});
console.log("2");Then 메소드는 매번 Promise 인스턴스를 반환합니다. then의 첫 번째 매개변수는 성공 콜백입니다. 이 성공적인 콜백의 매개변수는 다음과 같습니다. 이전 Promise 인스턴스에 의해 실행된 해결 메소드의 매개변수
일반적으로 then 메소드는 현재 <🎜를 반환합니다. >promise , then 메소드에서 새 Promise 인스턴스가 반환되면 이 기능을 사용하여 다층 콜백을 구현할 수 있습니다. 🎜>코드가 비동기식이든 동기식이든 관계없이 Promise의 then 메서드를 사용할 수 있습니다. 동기식 코드는 then 메서드의 첫 번째 매개변수에 직접 작성하고, 필수 매개변수는 확인을 통해 다음 then 메서드에 전달됩니다.
비동기 코드인 경우 Promise 인스턴스를 직접 반환합니다.new Promise(function(resolve , reject) {
resolve(1);
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(2);
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(3);
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(4);
});
}).then(function(val) {
console.log(val);
});new Promise(function(resolve , reject) {
resolve(1);
}).then(function(val) {
console.log(val);
return 2;
}).then(function(val) {
console.log(val);
return 3;
}).then(function(val) {
console.log(val);
return new Promise(function(resolve,reject) {
//异步操作些这里
resolve(4);
});
}).then(function(val) {
console.log(val);
return 5;
}).then(function(val) {
console.log(val);
});var promise = new Promise(function(resolve , reject) {
resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
console.log("成功");
throw new Error("heheda");
}).catch(function(e) {
console.log(e);
}).then(function() {
console.log("继续执行");
});Promise.all(iterable)
모두 실행되는 경우 Promise 객체를 반환합니다. 반복 가능한 매개변수의 Promise가 해결되면 Promise도 해결됩니다 all 메소드는 인스턴스 메소드가 아닌
Promise 함수
Promise.예 :
new Promise(function(resolve , reject) {
resolve(1);
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
throw new Error("err");
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(3);
});
}).then(function(val) {
console.log(val);
return new Promise(function(resolve , reject) {
resolve(4);
});
}).then(function(val) {
console.log(val);
}).catch(function(err) {
console.log(err);
}).then(function() {
console.log("继续执行")
})iterable 매개변수가 성공하거나 실패하면 상위 Promise는 성공 반환 값 또는 하위 Promise의 실패 세부정보를 매개변수로 사용하여 상위 Promise에 바인딩된 해당 핸들을 즉시 호출하고 Promise 개체를 반환합니다.
Promise.reject(reason)
Promise의 거부된 핸들을 호출하고 이 Promise 객체를 반환합니다.
Promise.resolve(value)
성공 값 값으로 Promise 객체를 해결합니다. 값이 then 가능한 경우(즉, then 메소드 사용) 반환된 Promise 객체는 값을 "따르며" 값의 최종 상태를 채택합니다. 그렇지 않으면 반환 값은 반환된 값을 충족(fullfil)하기 위해 이 값을 사용합니다. 약속의 대상.
공식 예:
var p0 = new Promise(function(resolve) {
setTimeout(function() {
resolve(0)
},1000);
})
var p1 = new Promise(function(resolve) {
setTimeout(function() {
resolve(1)
},2000);
})
var p2 = new Promise(function(resolve) {
setTimeout(function() {
resolve(2)
},3000);
})
Promise.all([p0,p1,p2]).then(function(arr) {
console.log(arr)
})<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="log"></p>
<script>
'use strict';
var promiseCount = 0;
function testPromise() {
var thisPromiseCount = ++promiseCount;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 开始(同步代码开始)<br/>');
// 我们创建一个新的promise: 然后用'result'字符串解决这个promise (3秒后)
var p1 = new Promise(function (resolve, reject) {
// 解决函数带着解决（resolve）或拒绝（reject）promise的能力被执行
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)<br/>');
// 这只是个创建异步解决的示例
window.setTimeout(function () {
// 我们满足（fullfil）了这个promise!
resolve(thisPromiseCount)
}, Math.random() * 2000 + 1000);
});
// 定义当promise被满足时应做什么
p1.then(function (val) {
// 输出一段信息和一个值
log.insertAdjacentHTML('beforeend', val + ') Promise被满足了(异步代码结束)<br/>');
});
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)<br/><br/>');
}
testPromise();
</script>
</body>
</html>function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};
// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};
// Make the request
req.send();
});
}
기타:
위 내용은 Promise에 대한 몇 가지 기본 지식입니다. , 기타 지식 포인트도 있습니다. 능력이 제한되어 있으므로 하나씩 소개하지는 않겠습니다(Promise.resolve의 다양한 매개변수, Generator와 함께 사용, Promise의 추가 메소드 등). Promise의 실행 프로세스를 그려보면 Promise를 더 잘 이해할 수 있습니다. Promise는 여전히 상당히 혼란스럽습니다.
브라우저 지원:Chrome 32, Opera 1, Firefox 29, Safari 8, Microsoft Edge 등의 브라우저는 모두 기본적으로 지원됩니다.
위 내용은 ES6의 새로운 기능입니다. 내장된 JavaScript Delay 객체 Promise 코드가 자세히 소개되어 있습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
