1阅嘶、Promise是什么
1.1 理解
- 抽象表達(dá)
Promise是一門新的技術(shù)（ES6規(guī)范）
Promise是JS種進(jìn)行異步編程的新解決方案 - 具體表達(dá)
從語法上來說萝衩，promise是一個(gè)構(gòu)造函數(shù)嚼松；
從功能上來說八毯，promise對(duì)象用來封裝一個(gè)異步操作并可以獲取其成功/失敗的結(jié)果值绢涡；
異步編程包括：fs文件操作乓梨，數(shù)據(jù)庫(kù)操作鳖轰，AJAX，定時(shí)器
// fs操作
require('fs').readFile('./index.html', (err, data) => {})
// Ajax
$.get('/server', (data) => {})
// 定時(shí)器
setTimeout(()=>{}, 2000)
2扶镀、為什么使用Promise
2.1 指定回調(diào)函數(shù)的方式更加靈活
- 原來的方式：必須在啟動(dòng)異步任務(wù)之前指定蕴侣；
- promise：?jiǎn)?dòng)異步任務(wù) => 返回promise對(duì)象 => 給promise對(duì)象綁定回調(diào)函數(shù)
2.2 支持鏈?zhǔn)秸{(diào)用，可以解決回調(diào)地獄問題
- 什么是回調(diào)地獄
回調(diào)函數(shù)嵌套調(diào)用臭觉，外部回調(diào)函數(shù)異步執(zhí)行的結(jié)果是嵌套的回調(diào)執(zhí)行的條件昆雀； - 回調(diào)地獄的缺點(diǎn)
不便于閱讀和處理 - 解決方案
promise鏈?zhǔn)秸{(diào)用
3、初次使用
// promise形式實(shí)現(xiàn)
// resolve 解決蝠筑，函數(shù)類型數(shù)據(jù)
// reject 拒絕忆肾，函數(shù)類型數(shù)據(jù)
const p = new Promise((resolve, reject) => {
setTimeout(()=> {
let n = rand(1, 100);
// 判斷
if(n<=30){
resolve(); // 將promise對(duì)象的狀態(tài)設(shè)置為成功
}else{
reject(); // 將promise對(duì)象的狀態(tài)設(shè)置為失敗
}
}, 1000);
});
// 調(diào)用then方法對(duì)promise中的resolve和reject進(jìn)行定義
p.then(()=>{
console.log("選中，恭喜");
}, ()=>{
console.log("未選中菱肖，謝謝惠顧");
});
4客冈、實(shí)踐練習(xí)
4.1 fs模塊
要求讀取文件夾src下面的文件content.txt
// 1、采用回調(diào)函數(shù)的形式
const fs = require('fs');
fs.readFile('./src/content.txt', (err, data) => {
// 如果出錯(cuò)稳强，則拋出錯(cuò)誤
if(err) throw err;
// 輸出文件內(nèi)容
console.log(data.toString());
})
// 2场仲、采用Promise的形式
let p = new Promise((resolve, reject) => {
fs.readFile('./src/content.txt', (err, data) => {
// 如果出錯(cuò)
if(err) reject(err);
// 如果成功
resolve(data);
});
});
//調(diào)用then
p.then(value => {
console.log(value.toString());
}, reason => {
console.log(reason);
})
4.2 ajax模塊
點(diǎn)擊按鈕發(fā)送ajax請(qǐng)求
/*1和悦、原來的方式*/
const btn = document.querySelector("#btn");
btn.addEventListener('click', function(){
// 1.創(chuàng)建對(duì)象
const xhr = new XMLHttpRequest();
// 2.初始化
xhr.open('GET', 'https://api.apiopen.top/getJoke');
// 3.發(fā)送
xhr.send();
// 4. 處理響應(yīng)結(jié)果
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// 判斷響應(yīng)狀態(tài)碼 2xx
if(xhr.status >= 200 && xhr.status < 300) {
// 輸出響應(yīng)體
console.log(xhr.response);
} else {
// 輸出響應(yīng)狀態(tài)碼
console.log(xhr.status);
}
}
}
})
/*使用promise*/
const btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
const p = new Promise((resolve, reject) => {
// 1、創(chuàng)建對(duì)象
const xhr = new XMLHttpRequest();
// 2渠缕、初始化
xhr.open('GET', 'https://api.apiopen.top/getJok');
// 3鸽素、發(fā)送
xhr.send();
// 4、處理響應(yīng)結(jié)果
xhr.onreadystatechange = function(){
// 判斷狀態(tài)
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
});
p.then(value=>{
console.log(value);
}, reason=>{
console.warn();
})
5. promise的狀態(tài)
狀態(tài)指的是實(shí)例對(duì)象中的一個(gè)屬性 【PromiseState】:
- pending -> resolved 成功
- pending -> rejected 失敗
只有這兩種亦鳞，且一個(gè)promise對(duì)象只能改變一次馍忽，無論是成功還是失敗，都有一個(gè)結(jié)果數(shù)據(jù)燕差；
成功的結(jié)果一般稱為value遭笋，失敗的結(jié)果一般是reason；
6. promise 對(duì)象的值
實(shí)例對(duì)象中的另一個(gè)屬性【PromiseResult】
保存異步任務(wù)【成功/失敗】的結(jié)果
- resolve
- reject
7. promise的基本流程
基本流程
8. promise的相關(guān)API使用
8.1 promise構(gòu)造函數(shù)
Promise(excutor){}
- executor函數(shù)：執(zhí)行器
(resolve, reject) => {} - resolve 函數(shù)：內(nèi)部定義成功時(shí)候我們調(diào)用的函數(shù)
value => {} - reject 函數(shù)：內(nèi)部定義失敗時(shí)候我們調(diào)用的函數(shù)
reason => {}
8.2 Promise.prototype.then 方法
(onResolved, onRejected) => {}
- onResolved函數(shù)：成功的回調(diào)函數(shù)
(value) => {} - onRejected函數(shù)：失敗的回調(diào)函數(shù)
(reason) => {}
指定用于得到成功value的成功回調(diào)和用于得到失敗reason的失敗回調(diào)徒探，返回一個(gè)新的Promise對(duì)象
8.3 Promise.prototype.catch 方法
(onRejected) => {}
- onRejected 函數(shù)：失敗的回調(diào)函數(shù)
(reason) => {}
8.4 Promise.resolve方法
(value) => {}
- value：成功的數(shù)據(jù)或者promise對(duì)象
let p1 = Promise.resolve(521);
console.log(p1);
8.5 Promise.reject方法
(reason)=>{}
- reason: 失敗的原因
8.6 Promise.all方法
(promises) => {}
- 返回一個(gè)新的promise瓦呼，只有所有的promise都成功才能成功，只要有一個(gè)失敗就直接失敳獍怠央串；
8.7 Promise.race方法
(promises) => {}
