es6-目前最好的异步解决方案Promise

发表于 | 分类于

前言

Promise是es6中的一个新的函数。它是为了解决js中异步操作导致的一些问题。

异步

异步一般是指需要等待的操作，比如读取一个文件，发起一个请求等待。异步一般伴随着回调函数。这种异步回调的设计，大大增加了js的运行速度，但是写起来有时候会很蛋疼。比如(回调地狱)：

1
2
3
4
5
6
7
8
9
10
11
12
$.get("url1",function(data1){
    
    $.get("url2",function(data2){

        $.get("url3",function(data3){

            $.get("url4",function(data4){
                ...
            })
        })
    })
})

这样的代码，看起来一点都不优雅。于是ECMA组织设计了Promise的用法。

Promise

Promise是一个构造函数。所以需要new出实例。new Promise的时候，ECMA要求必须传入一个函数当做参数，且这个函数接收两个值，resolve、reject两个函数参数。。其中：

  • Resolve 成功函数
  • Reject 失败函数

Promise有以下特点：

  • 1）Promise对象不能单独使用，必须封装在一个函数中作为return值使用。后面的loadfile（）函数就返回Promise对象的实例。
  • 2）只要函数return 了Promise对象的实例了，此时就能调用then，then中有两个参数，分别是表示成功回调和失败回调。
  • 3）New Promise而定时候，形参resolve和reject函数，分别表示成功、失败调用时then中那两个函数。
  • 4）往死记住，return new Promise 对象里面的那个函数，必须是异步的函数。
    例如以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var fs  =require("fs");
    function loadfile(path){
        return new Promise((resolve,reject)=>{
            fs.readFile(path,(err,data)=>{
                if(err){
                    reject();
                    return;
                }
                resolve(data.toString());
            })
        })
    }


    loadfile("./txt/1.txt").then(function(data){
        console.log(data);
        return loadfile("./txt/2.txt")
    }).then(function(data){
        console.log(data);
        return loadfile("./txt/3.txt")
    }).then(function(data){
        console.log(data);
    })

可以看到回调函数的代码，已经变成了这种“队列”形式的代码。

ES7中的async/await 用同步的方式写异步

Es7中提出的async/await。。上面的代码解决了回调黑洞，但是then了好多次不好看。
现在的程序员提出了async/await这种写法，不写then().
用同步的方法，写异步函数。 比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var fs  =require("fs");
function loadfile(path){
    return new Promise((resolve,reject)=>{
        fs.readFile(path,(err,data)=>{
            if(err){
                reject();
                return;
            }
            resolve(data.toString());
        })
    })
}
const work = async function(){
    var data1 = await loadfile("./txt/1.txt");
    console.log(data1);
    var data2 = await loadfile("./txt/2.txt");
    console.log(data2);
    var data3 = await loadfile("./txt/3.txt");
    console.log(data3);
}

work();

上面的代码会依次输出 data1,data2,data3里面的内容。
这种写法有以下特点：

  • async 必须出现在function标识符之前，表示这里面有await语句。说明是一个异步的语句
  • Await必须出现在async标记过的函数里面，表示“等待”。
  • Await必须添加在那个返回Promise对象的函数之前。

参考

Promise 对象