一、什么是promise？
是es6的新增语法，用来解决异步问题，接口套接口的回调地狱问题
二、promise的基本语法
var a = 2;
var p = new Promise(function (resolve, reject) {
if ('异步请求成功') {
resolve('成功的结果')
} else {
reject('失败的结果')
}
});
p.then(
function (res1) {
console.log(res1) // 成功resolve promise 的第一个then中的第一个函数来处理
},
//可以写俩个函数
function(res2){
console.log(res2);//then的第二个函数也可以用来接受reject的返回值 2
}
).catch(function (error) {//必须写
// 捕获错误
if (error) {
console.log(error)
}
}).
then(function (er) {//第二个then是第一个then结束后的回调函数
// 第一个then 处理结束后的回调函数
console.log('处理完成')
})
// 获得reject 的结果 使用catch then 也是可以捕获的，但是会报错
语法总结：
1、promise的参数是一个回调函数，回调函数中有有俩个参数分别是 resolve，reject
resolve用来返回异步请求成功的结果
reject用来返回异步请求失败的结果
2、promise的对象将异步结果保存后 需要使用第一个.then来获取结果resolve函数的返回结果 .catch 获取reject返回结果 。当然我们也可以在第一个.then中的第二个回调函数获得reject返回的结果（以上问题可以查看代码）
3、promise还可以使用第二个.then是第一个.then的回调函数，这里既可以继续处理其他逻辑（个人感觉有些马后炮的意思所以不经常使用，所以出现的概率有点低）
三、promise.all的用法
1、promise.all语法
var p1=Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1完成')
},1000)
})
var p2=Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1完成')
},2000)
})
var p3=Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1完成')
},3000)
})
Promise.all([p3,p2,p1]).then(function(res){
console.log(res);
//p3,p2,p1是我们调用的顺序 ["p3完成","p2完成","p1完成"]是我们返回的结果
//可以看得出来，我们控制了3个异步请求的返回顺序
})
总结 ：promise.all的使用场景就是可以同时处理多个异步请求并控制他们返回【结果的顺序】
注意：promise.all中的任何一个请求，都将不会有返回结果
四、promis.race的用法
var p1=new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1');
},1000)
});
var p1=new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1');
},30)
});
Promise.race([p1,p2]).then(function(data){
console.log(data);//'p2' 这里只返回一个执行最快的结果
})
五、promise结合await asyan封装接口API
var token = JSON.parse(localStorage.getItem('userInfo')).remember_token
function http(url, type, data = '') {
var p = new Promise((v, b) => {
$.ajax({
headers: {
Authorization: 'Bearer ' + token
},
url,
type,
data,
success: (res) => {
v(res)
},error:(er)=>{
b(er)
}
})
})
return p
}
function getNav(){
return http('http://***.**.**.***:**/api/menu/info','post')
}
function getList(pageNum,statues,nickname,mobile){
return http(`http://***.**.**.***:**/api/user?page=${pageNum}&limit=10&status=${statues}&nickname=${nickname}&mobile=${mobile}&`,'get')
}
调用：
async function List(n, status, nickname, mobel) {
var list = await getList(n, status, nickname, mobel)
//这个将 异步的接口封装，同步化
console.log(list);//这里以同步的方式 获取异步结果
}
