promise
回调地狱
存在异步任务的代码,不能保证能按照顺序执行,那如果我们非要代码顺序执行呢?正常的方式是添加回调
$.ajax({
url: 'http://192.168.XX.XXX:9999/path1', //接口地址
method: 'get', //请求方式
data:{
username: 'wang',
password: 'abcd'
},
dataType: 'json',
timeout: 5000, //超时事件
// 回调函数
success: function(res){
callback(res)
},
error: function(err){
console.log('请求出错',err)
}
})
function callback(res){
setTimeout(function () { //第一层
console.log('111');
setTimeout(function () { //第二程
console.log('222');
setTimeout(function () { //第三层
console.log('333');
}, 1000)
}, 2000)
}, 3000)
}
解决回调地狱问题
promise解决
function fn(str){
var p=new Promise(function(resolve,reject){
//处理异步任务
var flag=true;
setTimeout(function(){
if(flag){
resolve(str)
}
else{
reject('操作失败')
}
})
})
return p;
}
fn('111')
.then((data)=>{
console.log(data);
return fn('222');
})
.then((data)=>{
console.log(data);
return fn('333')
})
.then((data)=>{
console.log(data);
})
.catch((data)=>{
console.log(data);
})
async/await
我们看async关键字,他作为一个关键字放到声明函数前面,表示该函数为一个异步任务,不会阻塞后面函数的执行
async function fn(){
return '111';
}
console.log(fn());
async自动封装一个promise对象
和Promise对象一样,处理异步任务时也可以按照成功和失败来返回不同的数据,处理成功时用then方法来接收,失败时用catch方法来接收数据
async function fn() {
var flag = true;
if (flag) {
return '1111';
}
else{
throw '处理失败'
}
}
fn()
.then(data=>{
console.log(data);
})
.catch(data=>{
console.log(data);
})
console.log('先执行我,表明async声明的函数是异步的');
await关键字
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await可以直接拿到Promise中resolve中的数据
//封装一个返回promise的异步任务
function fn(str) {
var p = new Promise(function (resolve, reject) {
var flag = true;
setTimeout(function () {
if (flag) {
resolve(str)
} else {
reject('处理失败')
}
})
})
return p;
}
//封装一个执行上述异步任务的async函数
async function test(){
var res1=await fn('111'); //await直接拿到fn()返回的promise的数据,并且赋值给res
var res2=await fn('222');
var res3=await fn('333');
console.log(res1,res2,res3);
}
//执行函数
test();
await会一直等待同步等待async的结果,类似java中的future.get()或者Netty中的sync方法,都表示类似的含义,同步等待异步操作的结果