1.為什么需要Promise
-
回調(diào)地獄
回調(diào)函數(shù)中嵌套回調(diào)
Promise解決了回調(diào)地獄
2. Promise 的基本使用
- 語法
new Promise(( reslove, reject ) =>{
resolve('唐偉真');
//reject('楊松');
})
Promise接受兩個(gè)函數(shù)作為參數(shù)
- resolve: 成功函數(shù)
- reject: 失敗函數(shù)
-
Promise實(shí)例
promise實(shí)例有兩個(gè)屬性
-
state: 狀態(tài)
state的三個(gè)值分別為：
- pending：new promise后就是pending（進(jìn)行中）
- fulfilled：執(zhí)行成功
- rejected：執(zhí)行失敗
result: 結(jié)果
-
1) Promise狀態(tài)的改變
- 示例1
const p = new Promise((resolve, reject) => {
//resolve(): 調(diào)用函數(shù), 使當(dāng)前Promise對象的狀態(tài)改成fulfilled
reslove();
})
console.dir(p) // fulfilled
- 示例2
const p = new Promise((resolve, reject) => {
//resolve(): 調(diào)用函數(shù), 使當(dāng)前Promise對象的狀態(tài)改成fulfilled
//reject(): 調(diào)用函數(shù), 使當(dāng)前Promise對象的狀態(tài)改成rejected
//reslove();
reject()
})
console.dir(p)
- resolve(): 調(diào)用函數(shù), 使當(dāng)前Promise對象的狀態(tài)改成fulFilled
- reject(): 調(diào)用函數(shù),使當(dāng)前Promise對象狀態(tài)改成rejected
Promise狀態(tài)的改變是一次性的妈橄，即執(zhí)行了resolve函數(shù)后就不會執(zhí)行reject函數(shù)了
2) Promise 的結(jié)果
- 示例
const p = new Promise((resolve, reject) => {
//通過調(diào)用reslove,傳遞參數(shù),改變 當(dāng)前Promise對象的結(jié)果
resolve("成功的結(jié)果");
//reslove();
//reject("失敗的結(jié)果")
})
console.dir(p)
3. Promise的方法
1) then方法
then方法的注意點(diǎn)：
- then方法有兩個(gè)回調(diào)函數(shù)（成功回調(diào)函數(shù)每窖，失敗回調(diào)函數(shù)）
- then方法會返回一個(gè)新的promise對象材诽，且state為pending
- Promise的狀態(tài)不改變,不會執(zhí)行then里的方法
- 在then方法中,通過return將返回的Promise實(shí)例改為fulfilled狀態(tài)
- 在then方法中,出現(xiàn)代碼錯(cuò)誤,將返回的Promise實(shí)例改為rejected狀態(tài)
- 示例1
const p = new Promise((resolve, reject) => {
//通過調(diào)用reslove,傳遞參數(shù),改變 當(dāng)前Promise對象的結(jié)果
//reslove("成功的結(jié)果");
reject("失敗的結(jié)果")
})
//then方法函數(shù)
//參數(shù)有兩個(gè)
//且兩個(gè)參數(shù)都是函數(shù)
//返回值: 是一個(gè)Promise對象
p,then((result)=>{
//當(dāng)Promise的狀態(tài)使fulfilled時(shí)執(zhí)行
console.log("成功的回調(diào)")
},(reason)=>{
// 當(dāng)Promise的狀態(tài)時(shí)rejected時(shí), 執(zhí)行
console.log("失敗時(shí)調(diào)用")
})
console.dir(p)
- 在then方法的參數(shù)函數(shù)中,通過形參使用Promise對象的結(jié)果
then方法返回一個(gè)新的Promise實(shí)例,狀態(tài)時(shí)pending
const p = new Promise((resolve, reject) => {
//通過調(diào)用reslove,傳遞參數(shù),改變 當(dāng)前Promise對象的結(jié)果
//reslove(123);
reject("失敗的結(jié)果")
})
//then方法函數(shù)
//參數(shù)
//兩個(gè)參數(shù)都是函數(shù)
//返回值: 是一個(gè)Promise對象
p,then((value)=>{
//當(dāng)Promise的狀態(tài)使fulfilled時(shí)執(zhí)行
console.log("成功的回調(diào)",value)
},(err)=>{
// 當(dāng)Promise的狀態(tài)時(shí)rejected時(shí), 執(zhí)行
console.log("失敗時(shí)調(diào)用",err)
})
console.dir(p)
Promise的狀態(tài)不改變,不會執(zhí)行then里的方法
//如果Promise的狀態(tài)改變,then里的方法不會執(zhí)行
const p = new Promise((resolve, reject) => {
}).then.((value) => {
console.log("成功")
},(reason) => {
console.log("失敗")
})
在then方法中,通過return將返回的Promise實(shí)例改為fulfilled狀態(tài)
//如果Promise的狀態(tài)改變,then里的方法不會執(zhí)行
const p = new Promise((resolve, reject) => {
})
const t = p.then.((value) => {
console.log("成功")
//使用return可以將t實(shí)例的狀態(tài)改為fulfilled
return 123
},(reason) => {
console.log("失敗")
})
t.then.((value) => {
console.log("成功2",value)
},(reason) => {
console.log("失敗2")
})
在then方法中,出現(xiàn)代碼錯(cuò)誤,將返回的Promise實(shí)例改為rejected狀態(tài)
//如果Promise的狀態(tài)改變,then里的方法不會執(zhí)行
const p = new Promise((resolve, reject) => {
})
const t = p.then.((value) => {
console.log("成功")
//使用return可以將t實(shí)例的狀態(tài)改為fulfilled
return 123
},(reason) => {
//如果這里代碼出錯(cuò),會將t實(shí)例的狀態(tài)改為rejected
console.log("失敗")
})
t.then.((value) => {
console.log("成功2",value)
},(reason) => {
console.log("失敗2")
})
2) catch方法
示例
const p = new Promise((resolve, reject) => {
//reject()
//console.log(a)
throw new Error("出錯(cuò)了");
})
//思考: catch中的參數(shù)函數(shù)在什么時(shí)候被執(zhí)行
//1. 當(dāng)Promise的狀態(tài)改為rejcted.被執(zhí)行
//2. 當(dāng)Promise執(zhí)行體重出現(xiàn)代碼錯(cuò)誤時(shí),被執(zhí)行
p.catch((reason => {
console.log("失敗", reason)
})
console.log(p);
4.優(yōu)化代碼
示例
//封裝ajax請求
function getData(url, data = {}){
return new Promise((resolve, reject) => {
$.ajax({
//發(fā)送請求類型
type: "GET",
url: url,
data: data,
success: function (res) {
// 修改Promise狀態(tài)為成功, 修改Promise的結(jié)果res
resolve(res)
},
error:function (res) {
// 修改Promise的狀態(tài)為失敗,修改Promise的結(jié)果res
reject(res)
}
})
}
}
//調(diào)用函數(shù)
getData("data1.json")
.then((data) => {
//console.log(data)
const { id } = data
return getData("data2.json", {id})
})
.then((data) => {
//console.log(data)
const { usename } = data
return getData("data3.json", {usename})
})
.then((data) => {
console.log(data)
})
