Promise基本认识

什么是Promise?

1. 通俗一点就是一种写代码的方式，并且是用来写JavaScript编程中的异步代码的
2. Promise 是javascript异步编程的一种解决方案。 其他的一些异步解决方案为
   • 回调函数
   • 事件监听
   • 发布/订阅
3. 从语法上说，Promise是一个对象或者说函数，从它可以获取异步操作的消息

为什么需要Promise

我觉得除了上文说的那些原因，最主要是需要有一个对象格式来配合generator函数，个人觉得Promise和generator像是一对少了其中一个，另一个的意义也会变得不大

Promise作用

处理回调demo

• 回调比较多代码, 这种代码被称为回调地狱或者回调金字塔

const getDataCom = (str) => (dataS, cb) => {
	setTimeout(() => {
		if(typeof cb === 'function') {
			cb(str)
		}
	}, 10)
}
const getData1 = cb => {
	setTimeout(() => {
		cb('data1')
	}, 10)
}
const getData2 = getDataCom('data2')
const getData3 = getDataCom('data3')
const getData4 = getDataCom('data4')
const getData5 = getDataCom('data5')


getData1(data1 => {
  getData2(data1, data2 => {
    getData3(data2, data3 => {
      getData4(data3, data4 => {
        getData5(data4, data5 => {
          // 终于取到data5了
          console.log(data5)
        })
      })
    })
  })
})

假设上面的任务，想要换一下执行顺序，代码修改起来，就比较麻烦了。如果内容复杂，阅读代码的时候跳来跳去，也让人头大。

• 如果用promise改写一下：

// 先把getData们都转成返回promise对象的函数
// 然后
const getData1 = () => new Promise((resolve) => {
	setTimeout(() => {
		resolve('data1')
	}, 10)
});
const getData2 = (data) => new Promise((resolve) => {
	console.log(data)
	setTimeout(() => {
		resolve('data2')
	}, 10)
});
const getData3 = (data) => new Promise((resolve) => {
	console.log(data)
	setTimeout(() => {
		resolve('data3')
	}, 10)
});
const getData4 = (data) => new Promise((resolve) => {
	console.log(data)
	setTimeout(() => {
		resolve('data4')
	}, 10)
});
const getData5 = (data) => new Promise((resolve) => {
	console.log(data)
	setTimeout(() => {
		resolve('data5')
	}, 10)
});

getData1().then(getData2).then(getData3).then(getData4).then(getData5).then(data => {
  // 取到最终data了
  console.log(data)
})

结合generator函数和async/await控制异步的操作流程

• 例子

function* longRunningTask(value1) {
  try {
    var value2 = yield step1(value1);
    var value3 = yield step2(value2);
    var value4 = yield step3(value3);
    var value5 = yield step4(value4);
    // Do something with value4
  } catch (e) {
    // Handle any error from step1 through step4
  }
}

基本使用和Api了解

一般学习Promise看到的第一段代码是这样

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(() => {
    // 如果p的状态被resolve了，就进入这里
}, () => {
    // 如果p的状态被reject
})

构造函数

语法

new Promise(function(resolve, reject) {...}
/* executor */);
/*
构造函数接受一个函数作为参数
调用构造函数得到实例promise的同时，作为参数的函数会立即执行
参数函数接受两个回调函数参数resolve和reject
在参数函数被执行的过程中，如果在其内部调用resolve，会将promise的状态变成fulfilled，或者调用reject，会将p的状态变成rejected
*/

方法

1. Promise.all(iterable)
2. Promise.race(iterable)
3. Promise.reject(reason) 返回一个状态为失败的Promise对象
4. Promise.resolve(value)

原型

1. Promise.prototype.then(onFulfilled, onRejected)
2. Promise.prototype.catch(onRejected)
3. Promise.prototype.finally(onFinally)

参考链接

1. JavaScript Promise：简介
2. Promise详解与实现（Promise/A+规范）
3. Promise规范
4. 讲讲标准的 Promise 长啥样？
5. Promise MDN
6. 理解JavaScript Promise