promise

基本用法

function fetch() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('请求失败');
    }, 1000)
  })
}

fetch()
  .then(
    function (data) {
      //成功的处理
      console.log('请求处理-0');
      console.log(data + "-0");
    },
    function (reason, data) {
      //失败的处理
      console.log('触发异常-2');
      console.log(reason + "-2");
    }
  )

常用写法 resolve()

//做饭
function cook() {
  console.log('开始做饭。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('做饭完毕!');
      resolve('鸡蛋炒饭');
    }, 1000);
  });
  return p;
}
//吃饭
function eat(data) {
  console.log('开始吃饭:' + data);
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('吃饭完毕!');
      resolve('一块碗和一双筷子');
    }, 2000);
  });
  return p;
}

function wash(data) {
  console.log('开始洗碗:' + data);
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('洗碗完毕!');
      resolve('干净的碗筷');
    }, 2000);
  });
  return p;
}
//正常写法
// cook()
//   .then(function (data) {
//     return eat(data);
//   })
//   .then(function (data) {
//     return wash(data);
//   })
//   .then(function (data) {
//     console.log(data);
//   });

//简化写法
cook()
  .then(eat)
  .then(wash)
  .then(function (data) {
    console.log(data);
  });

常用写法 reject()

//做饭
function cook() {
  console.log('开始做饭。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('做饭失败!');
      reject('烧焦的米饭');
    }, 1000);
  });
  return p;
}

//吃饭
function eat(data) {
  console.log('开始吃饭:' + data);
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('吃饭完毕!');
      resolve('一块碗和一双筷子');
    }, 2000);
  });
  return p;
}

cook()
  .then(eat, function (data) {
    console.log(data + '没法吃!');
  })

catch() 用法

//做饭
function cook() {
  console.log('开始做饭。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('做饭失败!');
      reject('烧焦的米饭');
    }, 1000);
  });
  return p;
}
//吃饭
function eat(data) {
  console.log('开始吃饭:' + data);
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('吃饭完毕!');
      resolve('一块碗和一双筷子');
    }, 2000);
  });
  return p;
}
cook()
  .then(eat)
  .catch(function (data) {
    console.log(data + '没法吃!');
  });

all() 彼此异步 同时完成才会进行下一步

//切菜
function cutUp() {
  console.log('开始切菜。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('切菜完毕!');
      resolve('切好的菜');
    }, 1000);
  });
  return p;
}

//烧水
function boil() {
  console.log('开始烧水。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('烧水完毕!');
      resolve('烧好的水');
    }, 1000);
  });
  return p;
}

Promise
  .all([cutUp(), boil()])
  .then(function (results) {
    console.log("准备工作完毕:");
    console.log(results);
  });

race() 彼此异步 只要有一个完成 就会进行下一步

//切菜
function cutUp() {
  console.log('开始切菜。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('切菜完毕!');
      resolve('切好的菜');
    }, 1000);
  });
  return p;
}

//烧水
function boil() {
  console.log('开始烧水。');
  var p = new Promise(function (resolve, reject) {        //做一些异步操作
    setTimeout(function () {
      console.log('烧水完毕!');
      resolve('烧好的水');
    }, 1000);
  });
  return p;
}

Promise
  .race([cutUp(), boil()])
  .then(function (results) {
    console.log("准备工作完毕:");
    console.log(results);
  });

racey应用:


/**
 * racey应用:
 * 上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
 * 如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
 * 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。
 */
function useRace(){
  function requestImg() {
    var p = new Promise(function (resolve, reject) {
      var img = new Image();
      img.onload = function () {
        resolve(img);
      }
      img.src = 'xxxxxx';
    });
    return p;
  }

  //延时函数,用于给请求计时
  function timeout() {
    var p = new Promise(function (resolve, reject) {
      setTimeout(function () {
        reject('图片请求超时');
      }, 5000);
    });
    return p;
  }

  Promise
    .race([requestImg(), timeout()])
    .then(function (results) {
      console.log(results);
    })
    .catch(function (reason) {
      console.log(reason);
    });
js
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。