Promise是什么?

  • 直接打印出来看看 console.dir(Promise); 可以看出 Promise 其实是一个构造函数,自身有all,race,reject,resolve等方法,其原型上有catch,then,finally等方法
  • Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
  • 先看一个例子:(写一个html,引入jquery)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //异步代码  写在这里面
    //resolve代表 解决了,也就是成功了
    //reject代表 被拒绝了,也就是失败了
    let p = new Promise(function(resolve,reject) {
    $.ajax({
    url : "data/test.txt",
    dataType : 'json',
    success(arr) {
    resolve(arr);
    },
    error(err) {
    reject(err);
    }
    })
    });

    p.then(function(arr){
    alert('成功了'+arr);
    },function(err){
    console.log(err);
    alert('失败了'+err);
    });
  • 下面用 promise 去读两个 txt 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    let p1 = new Promise(function(resolve,reject) {
    $.ajax({
    url : "data/test.txt",
    dataType : 'json',
    success(arr) {
    resolve(arr);
    },
    error(err) {
    reject(err);
    }
    })
    });
    let p2 = new Promise(function(resolve,reject) {
    $.ajax({
    url : "data/test1.txt",
    dataType : 'json',
    success(arr) {
    resolve(arr);
    },
    error(err) {
    reject(err);
    }
    })
    });
    Promise.all([p1,p2]).then(function(arr){
    alert("全都成功了");
    let [res1,res2] = arr;
    alert(res1);
    alert(res2);
    },function(){
    alert("至少有一个失败了");
    });
  • 读取两个文件的简写形式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    function createPromise(url) {
    return new Promise(function(resolve,reject) {
    $.ajax({
    url,
    dataType : 'json',
    success(arr) {
    resolve(arr);
    },
    error(err) {
    reject(err);
    }
    })
    });
    }

    Promise.all([
    createPromise("data/test.txt"),
    createPromise("data/test1.txt")
    ]).then(function(arr){
    alert("全都成功了");
    let [res1,res2] = arr;
    alert(res1);
    alert(res2);
    },function(){
    alert("至少有一个失败了");
    });
  • jquery自带的promise功能 更加的简洁 这才是Promise的最完美的写法

  • 有了Promise之后的异步

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    Promise.all([
    $.ajax({"url":"data/test.txt","dataType":"json"}),
    $.ajax({"url":"data/test1.txt","dataType":"json"})
    ]).then(function(arr){
    alert("全都成功了");
    let [res1,res2] = arr;
    alert(res1);
    alert(res2);
    },function(){
    alert("至少有一个失败了");
    });
    //总结 下上面的格式大概如下:
    Promise.all([$.ajax(),$.ajax()]).then(arr=>{
    //对了
    },err=>{
    //错了
    });
  • Promise.race() 竞速 可以看一下,和Promise.all()对比,all是以最慢的为准,race是以最快的为准;