동기식 프로그래밍은 일반적으로 디버깅하고 유지하기가 쉽지만 비동기 프로그래밍은 일반적으로 더 나은 성능과 유연성을 향상시킵니다. 비동기식의 가장 큰 특징은 기다릴 필요가 없다는 것입니다. "약속"은 점차 JavaScript의 가장 중요한 부분이되었으며 많은 수의 새로운 API가 약속 원칙을 구현하기 시작했습니다. 약속이 무엇인지, API와 사용법을 살펴 보겠습니다!
지위를 약속합니다
xmlhttprequest API는 비동기이지만 Promise API를 사용하지 않습니다. 그러나 약속을 사용하는 많은 기본 JavaScript API가 있습니다.
*배터리 API
*Fetch API (XHR 교체)
*ServiceWorker API
약속은 미래에 더 인기 있고 공통적이 될 것이며, 모든 프론트 엔드 개발자가이를 사용할 것이 매우 중요합니다. 주목할만한 또 다른 것은 Node.js가 약속 기반 플랫폼이라는 것입니다 (약속이 핵심 특징이라는 것은 분명합니다).
약속의 사용은 생각보다 간단합니다. settimeout을 사용하여 비동기 작업을 제어하는 데 사용된다면!
약속의 기본 사용
새로운 Promise () 생성자는 이전 settimeout 및 xmlhttprequest의 이전 사용과 마찬가지로 전통적인 비동기 작업에 사용할 수 있습니다. 새로운 키워드를 사용하여 새로운 약속이 생성됩니다. 동시에이 약속은 콜백 작업을 수행 할 수 있도록 해결 및 거부 기능을 제공합니다.
var p = new Promise (함수 (Resolve, Reject) {// 비동기 작업 비동기 작업을 수행 한 다음 ... If (/ * 양호한 조건 */) {resolve ( 'success!');} else {devreje ( 'failure!');}});프로그래머는 실행 상황에 따라 콜백 함수 내에서 수동으로 Resolve 및 거부 기능을 거부 할 수 있습니다. 다음은 xmlhttprequest 호출을 약속 기반 작업으로 변환하는보다 현실적인 예입니다.
// Jake Archibald의 약속과 뒤에서 : // http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promising-xmlhttprequestfunction get (// 새로운 약속을 반환합니다. return new Promise (function (Resolve, Reject) {// 일반적인 xhr stuff var req = new xmlhttprequest (); req.open ( 'get', url); req.onload = function () {// 이것은 404 등에서도 호출됩니다. } {// 지위를 거부합니다 get! get ( 'Story.json'). 그런 다음 (함수 (응답) {console.log ( "success!", response);}, function (error) {console.error ( "실패!", error);});Promise.Resolve () 및 Promise.Reject ()는 직접 호출 할 수 있습니다. 때때로, 약속을 처형 할 필요가 없다고 판단 할 때, 우리는 약속 대상을 만들기 위해 새로운 것을 사용할 필요가 없지만 promise.resolve () 및 promise.reject ()를 직접 호출 할 수 있습니다. 예를 들어:
var usercache = {}; 함수 getUserDetail (username) {// 두 경우 모두 캐시 된 경우, 약속이 반환됩니다. } // Fetch API를 사용하여 정보를 가져옵니다. // fetch는 약속 반환을 반환합니다 ( 'users/' + username + '.json') .then (function (result) {UserCache [username] = result; return result;}) .catch (function () {새 오류 ( ' + username);}).약속은 확실히 돌아올 것이기 때문에, 우리는 당시를 사용하여 방법을 사용하여 반환 값을 처리 할 수 있습니다!
그런 다음 방법
모든 약속 객체 인스턴스에는 당시 방법이 있으며이 약속과 상호 작용하는 데 사용됩니다. 먼저, 당시 메소드는 기본적으로 resolve () 함수를 호출합니다.
new Promise (function (Resolve, Reject) {// settimeout settimeout (function () {resolve (10);}, 3000))를 사용한 모의 비동기 조치.그런 다음 콜백 작업의 트리거 시간은 약속이 실행된다는 것입니다. 또한 그 당시 메소드를 연결하여 콜백 작업을 수행 할 수도 있습니다.
새로운 약속 (함수 (Resolve, Reject) {// settimeout settimeout (function () {resolve (10);}, 3000);})를 사용한 모의 비동기 동작; 그런 다음 (function (num) {console.log ( '첫 번째 다음 :', num); 그런 다음 (num * 2; {num * 2) {num * 2); }). 다음 (function (num) {console.log ( 'last :', num);}); // 콘솔에서 : // 첫 번째 다음 : 10 // 마지막 // 마지막으로 : 40각 호출은 이전의 반환 값을 취한 다음 호출을 매개 변수로 취합니다.
약속이 실행되고 싱글이 다시 호출되면 콜백 조치가 다시 실행됩니다. 이 약속에서 거부 콜백 함수가 실행되고 당시 메소드가 호출되면 콜백 함수가 실행되지 않습니다.
캐치 방법
캐치 약속이 거부되면 (거부) 캐치 방법이 실행됩니다.
new Promise (함수 (Resolve, Reject) {// settimeout settimeout (function () {devject ( 'donge!');}, 3000);})를 사용하여 Mock Async 동작. 완료!'일반적으로 거부 방법에서 실행 실패 결과를 처리하고 캐치에서 예외 결과를 실행합니다.
거부 (오류 ( '데이터를 찾을 수 없음');
약속. 모든 방법
비동기 적으로 부를 때 종종 시나리오가 있습니다. 동시에 여러 비동기 작업을 호출해야하지만 모든 작업이 완료된 후에 만 응답 작업 만 수행하기를 바랍니다. 이것이 약속의 역할입니다. 약속. 모든 방법은 배열 형태로 매개 변수로 여러 약속을받을 수 있으며 이러한 모든 약속이 성공적으로 실행 된 후 콜백 함수가 호출됩니다.
promise.all ([Promise1, Promise2]). 그런 다음 (함수 (결과) {// 두 약속이 해결되었습니다}). catch (function (error) {// 하나 이상의 약속이 거부되었습니다});Promise.all을 사용하는 좋은 예는 여러 Ajax 작업 (Fetch) 호출을 수행하는 것입니다.
var request1 = fetch ( '/user.json'); var request2 = fetch ( '/articles.json'); promise.all ([request1, request2]). 그런 다음 (function (results) {// 두 약속!});우리는 또한 모두 약속을 반환하기 때문에 Fetch 및 배터리 상태 API의 혼합을 수행 할 수 있습니다.
promise.all ([fetch ( '/user.json'), navigator.getBattery ()]). 그런 다음 (function (results) {// 두 약속!});약속에서 거부 기능이 호출되면 실행이 거부되고 정상적으로 완료 될 수 없으므로 상황은 약간 복잡해집니다. 약속이 거부되면 캐치 방법은 첫 번째 실행 된 거부 기능을 잡습니다.
var req1 = new Promise (function (resolve, devject) {// settimeout settimeout (function ( 'first!');}, 4000);})를 사용한 모의 비동기 동작; var req2 = new Promise (function, Reject) {// a Mock Async Action (function () {reject ()}) 3000);}); promise.all ([req1, req2]). 그런 다음 (function (results) {console.log ( 'when :', one)). catch (function (err) {console.log ( 'catch :', err);}); // console : // catch!Promise.all은 매우 중요한 인터페이스이며 많은 새로 태어난 Promise API에서 중요한 역할을 할 것입니다.
약속
Promise.race는 흥미로운 기능입니다. 모든 약속이 해결되거나 거부되기를 기다리지는 않지만 모든 약속에서는 하나의 실행이 끝나는 한 발사됩니다.
var req1 = new Promise (function (resolve, devject) {// settimeout settimeout (function () {resolve ( 'first!');}, 8000);}); var req2 = new Promise (function, Reject) {// a Mock Async 동작 (function () {resolve ()}) 3000);};유용한 시나리오는 여러 미러 서버에서 리소스를 다운로드하는 것입니다. 한 사람이 돌아 오면 다른 반품은 처리되지 않습니다.
약속을 사용하는 법을 배우십시오
약속은 지난 몇 년 동안 매우 인기있는 주제였으며, 자바 스크립트에서 언어 아키텍처가되었습니다. 약속 기반 패턴을 사용할 수있는 점점 더 많은 JavaScript API를 곧 볼 것이라고 생각합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.