一、promise是什么?
promise 是一种异步编程的解决方案,它可以实现把异步操作按照同步操作的流程表达出来。它可以接收一个异步请求,然后在其then方法可以得到前面异步请求的结果进行后续操作,使用链式调用的方式将异步请求的结果按照同步的方式表达出来。它其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。
原型:每一个javascript对象(除null外)创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。
二、Promise的作用:
1,主要是用来解决回调嵌套(执行完后再去执行某一些操作,这时候容易形成嵌套再嵌套的问题)的问题,也就是常见的"回调地狱";
2,执行多并发请求获取数据;
三、Promise的创建:
promise 的参数是一个回调函数,回调函数中有两个参数分别是resolve, reject。 resolve 用来返回异步请求成功的结果 reject 用来返回异步请求失败的结果。
下面来看看promise的基本语法
var p = new Promise(function(resolve,reject){
if("异步请求成功"){
resolve('成功的结果')
}else{
reject('失败的信息')
}
});
三、Promise的优缺点:
优点:有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
缺点:首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
四、Promise常用的方法:
1,类方法(静态方法):
resolved:成功状态返回一个 Promise 对象;
reject:失败状态返回一个Promise 对象;
race:多个 Promise 任务同时执行,返回最先执行结束的 Promise 任务的结果,不管这个 Promise 结果是成功还是失败;
var p1 = new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('p1');
},2000)
}) ;
var p2 = new Promise(function (resolve, reject) {
setTimeout(function(){
resolve('p2');
},1000)
})
Promise.race([p1, p2]).then(function (data) {
console.log(data); // 'p2' 这里只返回一个执行最快的结果
})
all:如果全部成功执行,则以数组的方式返回所有 Promise 任务的执行结果,如果有错误就返回reject的结果;
var p1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p1完成')
},2000)
})
var p2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p2完成')
},1000)
})
var p3 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve('p3完成')
},3000)
})
Promise.all([p1,p2,p3]).then(function(res){
console.log(res) //返回结果 ["p1完成", "p2完成", "p3完成"]
//由此 可以看得出来,我们控制了 3个异步请求的返回顺序
})
2,实例方法:
.then链式:为 Promise 注册回调函数,函数一定要一个返回结果或者一个新的 Promise 对象,才可以让之后的then 回调接收;
.catch:异常处理 用于指定发生错误时的回调函数。
// 基本语法
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 .结合 await async 将异步代码同化 接口封装
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); // 这里以同步的方式 获得异步结果
}
使用场景2 .按顺序获得异步请求的结果