js Promise基本使用

创建Promise实例

promise是一个内置构造函数，接收一个执行函数（executor）作为参数

const promise = new Promise(() => {

})

console.log(promise) // Promise {<pending>}

参数函数接收两个形参：resolve，reject

这两个形参也是函数，resolve()调用表示成功，reject()调用表示失败

const promise = new Promise((resolve,reject) => {
    resolve('yes');
})

console.log(promise) // Promise {<fulfilled>: 'yes'}

而resolve和reject函数就是我们在之后要做的事

这时需要使用promise实例上的then方法，then有两个参数，分别对应ersolve和reject

在上面我们执行的是resolve，就会调用then中的第一个函数，并将实参 yes' 传给形参data

// promise.then(f1, f2)
promise.then(
	(data) => {
		console.log(data);
	},
	(reason) => {
		console.log(reason);
	}
)

promise的三个状态

promise有三个状态：默认状态/等待态（pending）、成功态（fulfilled）、失败态（rejected）

new Promise之后，是等待态，调用resolve()之后，是成功态，调用reject()之后，是失败态

这个状态决定了then执行then中的哪个回调函数，等待态时，then不执行任何函数

失败了就不再会执行then中resolve()对应的回调函数

成功了就不再会执行then中reject()对应的回调函数

 也就是说，resolve和reject只会执行其中一个，并且状态为成功或失败时不会再次改变

下面的示例中，只会打印 'yes'

因为当调用resolve(1)之后，promise的状态被确定为成功，后续的resolve或reject将不再执行

const promise = new Promise((resolve,reject) => {
  resolve('yes')
  reject('no')
})
promise.then(
  data => {
    console.log(data)
  },
  reason => {
    console.log(reason)
  }
)

then的链式调用

可以继续在then后面.then，因为then有返回值，而且是一个promise实例对象

const promise = new Promise((resolve,reject) => {
  resolve('yes')
})
const promise1 = promise.then(
  data => {
    console.log(data)
  }
)
console.log(promise1) // Promise {<pending>}

在then中的回调函数可以有返回值，返回值决定下个then执行哪个回调函数

当返回值为new Promise时，还是这个promise实例的resolve和reject来决定

当返回值为基本类型或复杂类型数据时，调用成功的回调，也就是第一个，参数就是该数据

当返回值为报错信息时，调用失败的回调，也就是第二个，参数为报错内容

 在下面的示例中，返回了一个promise实例并执行了resolve，所以后面的then会调用第一个回调

const promise = new Promise((resolve,reject) => {
    resolve('yes');
})

promise.then(
	data => {
        return new Promise(resolve,reject){
            resolve('成功');
        }
	}
).then(
	 data => console.log(data),
     reason => console.log(reason)
)