1、什么是promise玫恳？
是es6的新增語法，用來解決異步問題优俘，接口套接口的回調(diào)地獄問題京办。
2、promise的基本語法 上代碼
// 基本語法
var p = new Promise(function(resolve,reject){
if("異步請求成功"){
resolve('成功的結(jié)果')
}else{
reject('失敗的信息')
}
});
p.then(
function(res1){
console.log(res1) //promise的第一個then 中的第一個函數(shù)用來處理 resolve
},
// function(res2){
// console.log(res2) // then的第二個函數(shù)也可以用來 接收reject的返回值
// }
).catch(function(error){
// 捕獲錯誤
if(error){
console.log(error);
}
}).
then(function(er){ // 第二個then是第一個then結(jié)束后的回調(diào)函數(shù)
// 第一個then 處理結(jié)束后的回調(diào)函數(shù)
console.log('處理完成');
})
語法總結(jié)
- 1帆焕、promise 的參數(shù)是一個回調(diào)函數(shù)惭婿，回調(diào)函數(shù)中有兩個 參數(shù)人別是resolve, reject resolve 用來返回異步請求成功的結(jié)果 reject 用來返回異步請求失敗的結(jié)果
- 2、promise 的對象將異步請求結(jié)果保存后叶雹，需要使用第一個 .then來獲取結(jié)果resolve函數(shù)返回的結(jié)果 .catch 獲取reject 返回的結(jié)果财饥。當然，我們也可以在 第一個.then中的第二個 回調(diào)函數(shù)獲得 reject 返回的結(jié)果（上述問題可以查看代碼～ 我寫注釋了）
- 3折晦、promise 還可意識用 第二個.then是第一個.then的回調(diào)函數(shù)钥星，這里可以繼續(xù)處理其他邏輯（個人感覺有些 馬后炮的意思，所以不經(jīng)常使用满着，出現(xiàn)的概率也比較低）
3谦炒、prmise.all的用法
prmise.all 語法
var p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1完成')
},1000)
})
var p2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p2完成')
},2000)
})
var p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p3完成')
},3000)
})
Promise.all([p3,p2,p1]).then(function(res){
console.log(res)
// p3,p2,p1是我調(diào)用的順序 ["p3完成", "p2完成", "p1完成"]是我返回的結(jié)果
// 可以看得出來，我們控制了 3個異步請求的返回順序
})
總結(jié)：promise.all 的使用場景就是风喇，可以同時處理多個異步請求宁改，并控制他們返回的【結(jié)果的順序】
注意：promise.all中的 任何一個請求失敗，將不會有返回結(jié)果魂莫。
4还蹲、prmise.race的用法
var p1 = new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('p1');
},1000)
}) ;
var p2 = new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('p2');
},30)
})
Promise.race([p1, p2]).then(function (data) {
console.log(data); // 'p2' 這里只返回一個執(zhí)行最快的結(jié)果
})
5、promise 結(jié)合 await async 封裝接口api
var token = JSON.parse(localStorage.getItem('userIfo')).remember_token
function http(url, type, data = '') {
let p = new Promise((resolve, reject) => {
if (token) {
$.ajax({
headers: {
Authorization: 'Bearer ' + token
},
url,
type,
data,
success: (res) => {
resolve(res)
},
error: (er) => {
reject(er)
}
})
}
})
return p
}
function getNav() {
return http(`http://120.xx.xx.103:84/api/menu/info`, 'post')
}
function getList(n,status,nickname,mobel) {
return http(`http://120.xx.xx.103:84/api/user?page=${n}&limit=10&status=${status}&nickname=${nickname}&mobile=${mobel}&`, 'get')
}
// 調(diào)用
async function List(n, status, nickname, mobel) {
var list = await getList(n, status, nickname, mobel)
// 這個將 異步的接口封裝豁鲤，同步化
console.log(list); // 這里以同步的方式 獲得異步結(jié)果
}
