Promise의 기본 사용법:
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 인스턴스의 세 가지 상태:
인스턴스화된 각 Promise에는 보류 중(대기 중) 거부됨(거부됨) 해결됨(해결됨)의 세 가지 상태가 있습니다. Reject()가 실행되면 Promise의 상태는 거부되고 이 상태는 취소할 수 없습니다.
then 메소드:
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);
});catch 메서드: catch 메서드는 실패 콜백과 동일합니다. 이전 비동기 함수
throws 오류가 발생하면 오류가 포착되고 catch 메소드 또는 실패 콜백이 실행됩니다.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);
});Promise의 오류는 오류가 계층별로 전달됩니다. 잡히지 않으면 캡처될 때까지 다음 개체인 에 전달되고 계속 실행됩니다. 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의 네 가지 메서드: 생성자 Promise에는 Promise .all, Promise.race, Promise.reject, Promise.resolve의 네 가지 메소드가 있습니다.
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("继续执行")
})Promise.race(iterable)
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)
})이제 Promise가 있으므로 쉽게 사용할 수 있도록 XMLHttpRequest를 GET 메서드로 캡슐화할 수 있습니다. <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();
});
}가짜 데이터의 주소를 직접 설정할 수 있으며 콘솔을 통해 요청할 수 있습니다. 캡슐화하는 경우. 이미지를 비동기적으로 로드하기 위한 XMLHttpRequest into Promise: http: //www.php.cn/
기타:
위 내용은 Promise에 대한 몇 가지 기본 지식입니다. , 기타 지식 포인트도 있습니다. 능력이 제한되어 있으므로 하나씩 소개하지는 않겠습니다(Promise.resolve의 다양한 매개변수, Generator와 함께 사용, Promise의 추가 메소드 등). Promise의 실행 프로세스를 그려보면 Promise를 더 잘 이해할 수 있습니다. Promise는 여전히 상당히 혼란스럽습니다.
브라우저 지원:Chrome 32, Opera 1, Firefox 29, Safari 8, Microsoft Edge 등의 브라우저는 모두 기본적으로 지원됩니다.
위 내용은 ES6의 새로운 기능입니다. 내장된 JavaScript Delay 객체 Promise 코드가 자세히 소개되어 있습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
es6怎么判断是否为数组Apr 25, 2022 pm 06:43 PM在es6中，可以利用“Array.isArray()”方法判断对象是否为数组，若判断的对象是数组，返回的结果是true，若判断对象不是数组，返回的结果是false，语法为“Array.isArray(需要检测的js对象)”。
es6中遍历跟迭代的区别是什么Apr 26, 2022 pm 02:57 PMes6中遍历跟迭代的区别是：遍历强调的是要把整个数据依次全部取出来，是访问数据结构的所有元素；而迭代虽然也是依次取出数据，但是并不保证取多少，也不保证把所有的数据取完，是遍历的一种形式。
es6中怎么判断两个对象是否相等Apr 19, 2022 pm 03:34 PM在es6中，可用Object对象的is()方法来判断两个对象是否相等，该方法检测两个变量的值是否为同一个值，判断两个对象的引用地址是否一致，语法“Object.is(对象1,对象2)”；该方法会返回布尔值，若返回true则表示两个对象相等。
es6怎么将数字转为字符串Apr 19, 2022 pm 06:38 PM转换方法：1、利用“+”给数字拼接一个空字符，语法“数字+""”；2、使用String()，可把对象的值转换为字符串，语法“String(数字对象)”；3、用toString()，可返回数字的字符串表示，语法“数字.toString()”。
sort排序是es6中的吗Apr 25, 2022 pm 03:30 PMsort排序是es6中的；sort排序是es6中用于对数组的元素进行排序的方法，该方法默认不传参，按照字符编码顺序进行排序，排序顺序可以是字母或数字，并按升序或降序，语法为“array.sort(callback(a,b))”。
es6中assign的用法是什么May 05, 2022 pm 02:25 PM在es6中，assign用于对象的合并，可以将源对象的所有可枚举属性复制到目标对象；若目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性，语法为“Object.assign(...)”
es6怎么改变数组数据Apr 26, 2022 am 10:08 AM改变方法：1、利用splice()方法修改，该方法可以直接修改原数组的内容，语法为“数组.splice(开始位置,修改个数,修改后的值)”；2、利用下标访问数组元素，并重新赋值来修改数组数据，语法为“数组[下标值]=修改后的值;”。
import as在es6中的用法是什么Apr 25, 2022 pm 05:19 PM在es6中，import as用于将若干export导出的内容组合成一个对象返回；ES6的模块化分为导出与导入两个模块，该方法能够将所有的导出内容包裹到指定对象中，语法为“import * as 对象 from ...”。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Dreamweaver Mac版
시각적 웹 개발 도구
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
