1、什么是promise？
是es6的新增语法，用来解决异步问题，接口套接口的回调地狱问题。
2、promise的基本语法 上代码
// 基本语法
var p = new Promise(function(resolve,reject){
if("异步请求成功"){
resolve('成功的结果')
}else{
reject('失败的信息')
}
});
p.then(
function(res1){
console.log(res1) //promise的第一个then 中的第一个函数用来处理 resolve
},
// function(res2){
// console.log(res2) // then的第二个函数也可以用来 接收reject的返回值
// }
).catch(function(error){
// 捕获错误
if(error){
console.log(error);
}
}).
then(function(er){ // 第二个then是第一个then结束后的回调函数
// 第一个then 处理结束后的回调函数
console.log('处理完成');
})
语法总结
- 1、promise 的参数是一个回调函数，回调函数中有两个 参数人别是resolve, reject resolve 用来返回异步请求成功的结果 reject 用来返回异步请求失败的结果
- 2、promise 的对象将异步请求结果保存后，需要使用第一个 .then来获取结果resolve函数返回的结果 .catch 获取reject 返回的结果。当然，我们也可以在 第一个.then中的第二个 回调函数获得 reject 返回的结果（上述问题可以查看代码～ 我写注释了）
- 3、promise 还可意识用 第二个.then是第一个.then的回调函数，这里可以继续处理其他逻辑（个人感觉有些 马后炮的意思，所以不经常使用，出现的概率也比较低）
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是我调用的顺序 ["p3完成", "p2完成", "p1完成"]是我返回的结果
// 可以看得出来，我们控制了 3个异步请求的返回顺序
})
总结：promise.all 的使用场景就是，可以同时处理多个异步请求，并控制他们返回的【结果的顺序】
注意：promise.all中的 任何一个请求失败，将不会有返回结果。
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' 这里只返回一个执行最快的结果
})
5、promise 结合 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')
}
// 调用
async function List(n, status, nickname, mobel) {
var list = await getList(n, status, nickname, mobel)
// 这个将 异步的接口封装，同步化
console.log(list); // 这里以同步的方式 获得异步结果
}
