ES6：promise 异步加载

最新推荐文章于 2025-02-18 11:26:51 发布

原创最新推荐文章于 2025-02-18 11:26:51 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #Promise

ES6 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用JavaScript中的Promise来处理多个异步请求。首先通过单个Promise实例演示基本用法，接着展示了如何通过Promise.all同时处理多个异步请求，并确保所有请求成功才继续执行后续操作。

1：单个promise

    let p=new Promise(function (resolve, reject){
      $.ajax({
        url: 'data/arr2.txt',
        dataType: 'json',
        success(arr){
          resolve(arr);
        },
        error(err){
          reject(err);
        }
      })
    });

    p.then(function (arr){
      alert('成功'+arr);
    }, function (err){
      console.log(err);
      alert('失败了'+err);
    });

2：加载两个promise

    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/arr.txt'),
      createPromise('data/json.txt')
    ]).then(function (arr){
      let [res1, res2]=arr;
      alert('全都成功了');
      alert(res1);
      alert(res2);
    }, function (){
      alert('至少有一个失败了');
    });

3：jquery改进版

    Promise.all([
      $.ajax({url: 'data/arr.txt', dataType: 'json'}),
      $.ajax({url: 'data/json.txt', dataType: 'json'})
    ]).then(function (results){
      let [arr, json]=results;

      alert('成功了');
      console.log(arr, json);
    }, function (){
      alert('失败了');
    });

或者

    Promise.all([
      $.ajax({url: 'data/arr.txt', dataType: 'json'}),
      $.ajax({url: 'data/json.txt', dataType: 'json'}),
      $.ajax({url: 'data/num.txt', dataType: 'json'})
    ]).then(results=>{
      let [arr, json, num]=results;

      alert('成功了');

      console.log(arr, json, num);
    }, err=>{
      alert('失败了');
    });