Javascript教程：Promise入门详解

Promise 是 JavaScript 中特有的语法。可以毫不夸张得说，Promise 是ES6中最重要的语法，没有之一。初学者可能对 Promise 的概念有些陌生，但是不用担心。大多数情况下，使用 Promise 的语法是比较固定的。我们可以先把这些固定语法和结构记下来，多默写几遍；然后在实战开发中逐渐去学习和领悟 Promise 的原理、底层逻辑以及细节知识点，自然就慢慢掌握了。

在了解 Promise 之前，必须要知道什么是回调函数，这是必不可少的前置知识。关于回调函数的知识，已经在上一篇文章中做了讲解。

Promise 是异步编程的一种新的解决方案和规范。ES6将其写进了语言标准，统一了用法，原生提供了 Promise 对象。

Promise 对象, 可以用同步的表现形式来书写异步代码（也就是说，代码看起来是同步的，但本质上的运行过程是异步的）。使用 Promise 主要有以下优点：

• 1、可以很好地解决ES5中的回调地狱的问题（避免了层层嵌套的回调函数）。

• 2、统一规范、语法简洁、可读性和和可维护性强。

• 3、Promise 对象提供了简洁的 API，使得管理异步任务更方便、更灵活。

从语法上讲，Promise 是一个构造函数。从功能上来说，Promise 对象用于封装一个异步操作，并获取其成功/ 失败的结果值。

从写法规范上讲，Promise 本质上是处理异步任务的一种编写规范，要求每个人都按照这种规范来写。异步任务成功了该怎么写、异步任务失败了该怎么写、成功或者失败之后怎么通知调用者，这些都有规定的写法。Promise 的目的就是要让每个使用ES6的人都遵守这种写法规范。

Promise 的伪代码结构，大概是这样的：

// 伪代码1
myPromise()
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    );

// 伪代码2
是时候展现真正的厨艺了().然后(买菜).然后(做饭).然后(洗碗);

上面的伪代码可以看出，业务逻辑上层层递进，但是代码写法上却十分优雅，没有过多的嵌套。

Promise 的基本使用

ES5中，使用传统的回调函数处理异步任务时，其基本模型的写法已在上一篇内容“回调函数”里讲过。

ES6中，有了 Promise之后，我们可以对那段代码进行改进（基本模型不变）。你会发现，代码简洁规范了许多。

使用 Promise 处理异步任务的基本代码结构如下，我们先来认识一下：

// 使用 Promise 处理异步任务的基本模型

// 封装异步任务
function requestData(url) {
  // resolve 和 reject 这两个单词是形参，可以自由命名。大家的习惯写法是写成 resolve 和 reject
  const promise = new Promise((resolve, reject) => {
    const res = {
      retCode: 0,
      data: 'qiangu yihao`s data',
      errMsg: 'not login',
    };
    setTimeout(() => {
      if (res.retCode == 0) {
        // 网络请求成功
        resolve(res.data);
      } else {
        // 网络请求失败
        reject(res.errMsg);
      }
    }, 1000);
  });
  return promise;
}


// 调用异步任务
requestData('www.qianguyihao.com/index1').then(data => {
  console.log('异步任务执行成功:', data);
}).catch(err=> {
  console.log('异步任务执行失败:', err);
})

// 再次调用异步任务
requestData('www.qianguyihao.com/index2').then(data => {
  console.log('异步任务再次执行成功:', data);
}).catch(err=> {
  console.log('异步任务再次执行失败:', err);
})


// 调用异步任务（写法2）
/* 这段代码的写法比较啰嗦。一般推荐上面的写法。
const myPromise = requestData('www.qianguyihao.com/index1');
myPromise.then(data => {
  console.log('异步任务执行成功:', data);
});
myPromise.catch(err => {
  console.log('异步任务执行失败:', err);
});

const myPromise2 = requestData('www.qianguyihao.com/index2');
myPromise2.then(data => {
  console.log('异步任务执行成功:', data);
});
myPromise2.catch(err => {
  console.log('异步任务执行失败:', err);
});
*/

在日常开发中使用Promise时，80%以上的场景都符合上面的代码结构。你说它重不重要？我们暂且先记下，默写十遍，形成肌肉记忆，然后继续往下边学习边理解。