最简单语言理解Promise，async，await

promise是最近比较新的一个方法，主要作用是解决异步回调的，之前很多回调用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

唉，技术的更新还真是快，好好学习吧，同学们

最简单语言理解Promise，async，await

猜你喜欢