promise是最近比较新的一个方法,主要作用是解决异步回调的,之前很多回调用ajax,
但是回调很多的时候就容易写成这样,
ajax...
ajax...
ajax...
一层套一层,当代码量多了就非常麻烦,所以有些程序员喜欢叫他回调地狱,(但我不喜欢扯概念,我就喜欢叫一层套一层,接地气)
Promise的出现就是为了解决这个问题,首先我们看看他的基本写法
var pro = new Promise( function(resolve, reject){
// resolve 解决
// reject 拒绝
})
你可以简单理解 resolve 就是成功回调,reject 就是失败回调
然后我们借用 jquery 里的 ajax,看看他们是怎么配合的
注意:因为使用了 ajax 所以代码要在服务器环境下跑,提前准备一个1.txt文件用来读取内容,别忘了引入 jquery
var pro = new Promise( function(resolve, reject){
// resolve 解决
// reject 拒绝
// 1.txt的内容是 [1,2,3,4,5,6,8,9]
$.ajax({
url: '1.txt',
dataType: 'json',
success(arr){
resolve(arr)
},error(res){
reject(res)
}
})
})
pro.then( function(arr){
alert('成功');
console.log( arr );
}, function(res){
alert('失败')
console.log(res)
})
弹出来的结果就是 1.txt 的内容
有些人说这不跟以前写 ajax 没啥区别吗,还是这么写啊,对!没错,事实上在这一步的时候依然看不出他有什么好处,
但是我再说一个东西,你一定会觉得好用,就是 Promise.all
怎么用呢,看代码
Promise.all([
$.ajax({url: '1.txt', dataType: 'json'}),
$.ajax({url: '2.txt', dataType: 'json'}),
$.ajax({url: '3.txt', dataType: 'json'})
]).then( arr => {
alert('成功');
console.log(arr);
}, res => {
alert('失败')
console.log(res);
});
我为了省事儿用了一下箭头函数,如果看的费劲可以把 then 里面的函数换成以前的写法,意思是一样的
Promise.all([
$.ajax({url: '1.txt', dataType: 'json'}),
$.ajax({url: '2.txt', dataType: 'json'}),
$.ajax({url: '3.txt', dataType: 'json'})
]).then( function(arr){
alert('成功');
console.log(arr);
}, function(res){
alert('失败')
console.log(res);
});
是不是看着好多了?
另外说个小东西,Promise 还有个方法叫 Promise.race ,反正我没发现有啥用,各位看官如果知道有啥用可以留言告诉我
不废话,咱们继续
在处理异步回调的时候还有2个小东西非常好用,就是 async 和 await
先看 async
async function aaa(){
// 函数的前面加上了async,表明这个函数当中有异步回调,处理我的时候要注意!!
}
aaa()
配合 await 的写法
async function aaa(){
await $.ajax(); // 加上await的意思就是:你得等这句话执行完,才能继续往后走,没执行完就等着
}
aaa()
感觉很像上学那会,老师说讲完这道题就下课,没讲完谁也不许走。。。没办法,你只能等着
那么 async 到底是什么意思呢?
其实说白了,async 函数和普通函数最大的区别就是
async 函数可以“暂停”
普通函数只能一直执行,直到结束
其实 async 的底层实现是一个语法糖,等于说是把一个函数拆分成了几个小函数,
每执行完一个小函数,等结果出来,再执行下一个小函数,感觉很像暂停
不废话,继续看例子
async function aaa(){
var n = 1;
var w = await $.ajax({
url:'1.txt',
dataType:'json',
success: function(data){
console.log(data)
}
})
alert( n+w[0] ) // 2
}
aaa()
这就是一个典型的 await 用法,后面的 alert 必须等到 await 执行完才能弹出来,而不是先执行完再回调
现在主流的处理异步回调的方法就是 async 和 await ,他们已经取代了之前的 generator 和 yield
唉,技术的更新还真是快,好好学习吧,同学们