使用方法
//异步状态管理 resolve成功 reject失败
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{ //异步操作
console.log('hi');
resolve('成功')
// reject('失败')
},1000)
}).then(res=>{
console.log(res); //成功
},err=>{
console.log(err); //失败
})
//打印结果 1 2 3
let p=new Promise((resolve,reject)=>{
console.log(1); //没异步操作立即执行
resolve()
})
console.log(2);
p.then(res=>{ //异步性
console.log(3);
})
状态（不可逆，暂不举例）
使用Promise优雅ajax请求
- ajax请求
function ajax(url,successCallback,failCallback){
// 1、创建XMLHttpRequest对象
var xmlhttp
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest()
}else{ //兼容早期浏览器
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP')
}
// 2、发送请求
xmlhttp.open('GET',url,true)
xmlhttp.send()
// 3、服务端响应
xmlhttp.onreadystatechange=function{
if(xmlhttp.readyState===4&&xmlhttp.status===200){
var obj=JSON.parse(xmlhttp.responseText)
successCallback&&successCallback(obj) //参数传递了调用
}else if(xmlhttp.readyState===4&&xmlhttp.status===404){
failCallback&&failCallback(xmlhttp.statusText)
}
}
}
- 回调地狱 cllback hell
//1->2->3
ajax('static/a.json',res=>{
console.log(res);
ajax('static/b.json',res=>{
console.log(res);
ajax('static/c.json',res=>{
console.log(res);
})
})
})
- 使用Promise
function getPromise(url){
return new Promise((resolve,reject)=>{
ajax(url,res=>{
resolve(res)
},err=>{
reject(err)
})
})
}
getPromise('static/a.json')
.then(res=>{
console.log(res);
return getPromise('static/b.json') //需要返回promise
}).then(res=>{
console.log(res);
return getPromise('static/c.json')
}).then(res=>{
console.log(res);
}).catch(err=>{ //统一处理错误 以上任意一个请求错误直接到catch处理
console.log(err);
})
- 结合async/await 按顺序执行（类似同步写法）
import ajax from './ajax'
function request(url){
return new Promise(resolve=>{
ajax(url,res=>{
resolve(res)
})
})
}
//await只能在async中显示 await等待异步操作执行完再继续执行下一个
async function getData(){
const res1=await request('static/a.json')
console.log(res1);
const res2=await request('static/b.json')
console.log(res2);
const res3=await request('static/c.json')
console.log(res3);
}
getData()
Promise的静态方法
- Promise.resolve()
let p1=Promise.resolve('success')
console.log(p1);
p1.then(res=>{
console.log(res); //success
})
- Promise.reject()
let p2=Promise.reject('fail')
console.log(p2);
p2.catch(err=>{
console.log(err); //fail
})
使用场景
//没有new Promise实例，还要使用then/catch时可以直接使用Promise的静态方法
function foo(flag){
if(flag){
return new Promise(resolve=>{
resolve('success')
})
}else{
// return 'fail' 直接返回字符串 没有catch/then方法会报错
return Promise.reject('fail')
}
}
foo(false).then(res=>{
console.log(res);
},err=>{
console.log(err);
})
- Promise.all()
//三个异步操作都执行完成后 再执行其他
let p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(1);
resolve('1成功')
})
},1000)
let p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(2);
// resolve('2成功')
reject('2失败')
})
},2000)
let p3 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(3);
resolve('3成功')
})
},3000)
Promise.all([p1,p2,p3]).then(res=>{
console.log(res); //[...] 都成功返回数组里面每一个resolve的传参res
},err=>{
console.log(err); //打印2失败，只要有一个失败 直接进入err
})
- Promise.race()
Promise.race([p1,p2,p3]).then(res=>{
console.log(res); //只要有一个完成 打印先完成的
},err=>{
console.log(err); //只要有一个失败 都失败
})
Promise.all()的使用场景
//上传图片 全部传完提示用户上传成功
const imgArr=['1.jpg','2.jpg','3.jpg']
let promiseArr=[]
imgArr.forEach(item=>{
promiseArr.push(new Promise((resolve,reject)=>{
//此处进行图片上传的操作
resolve(url)
}))
})
Promise.all(promiseArr).then(res=>{
//res为图片的url 插入数据库操作
console.log('图片全部上传完成');
})
Promise.race()的使用场景
//加载图片 设置超时时间，如果时间内加载完显示，否则提示超时
function getImg(){
return new Promise((resolve,reject)=>{
let img=new Image()
img.onload=function(){
resolve(img) //如果加载成功
}
img.src='http://www.xxx.com/xx.jpg'
})
}
function timeout(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('图片请求超时') //图片超时
},2000)
})
}
Promise.race([getImg(),timeout()]).then(res=>{ //数组内两个promise对象
console.log(res);
}).catch(err=>{
console.log(err);
})
