promise实验+原理

1、链式调用then会生成新的Promise对象

const promise = Promise.resolve(1);
promise.then(result => console.log(`I got the result: ${result}`))
       .then(result => console.log(`Here is what I got: ${result}`));

I got the result: 1
Here is what I got: undefined

问题：resolve(1)就表示返回的值是1吗？而且都不需要写return语句吗？

代码改写1运行结果相同

//const promise = Promise.resolve(1);
const promise = new Promise((resolve, reject) => {
	resolve(1);
});
promise.then(result => console.log(`I got the result: ${result}`))
       .then(result => console.log(`Here is what I got: ${result}`));

代码改写2运行结果相同

//const promise = Promise.resolve(1);
const promise = new Promise((resolve, reject) => {
	return resolve(1);
});
promise.then(result => console.log(`I got the result: ${result}`))
       .then(result => console.log(`Here is what I got: ${result}`));

结论：无论是否写return,我们都返回resolve方法的值

或：调用then会创建一个新的Promise，并且在回调中我们return的任何值都会成为这个Promise的resolve值

2、在回调中return的值都会成为这个Promise的resolve值

const promise = Promise.resolve(1);
promise.then(result => {
            console.log(`I got the result: ${result}`);
            return result + 1;
        })
       .then(result => {
            console.log(`And so did I: ${result}`);
            return result + 1
       })
       .then(result => {
            console.log(`Me, too: ${result}`);
       });

I got the result: 1
And so did I: 2
Me, too: 3

 

3、Promise是否一定需要resolve or reject 才结束？是的

代码演示1

const promise = new Promise((resolve, reject) => {
  console.log("in Promise")
});
promise.then(result => console.log("outer promise"))
      

结果1

> "in Promise"

代码演示2

const promise = new Promise((resolve, reject) => {
  console.log("in Promise")
  resolve()
});
promise.then(result => console.log("outer promise"))

结果2

> "in Promise"
> "outer promise"

4、每一个Promise 没有resolve or reject是不会返回的

代码演示

let pro = new Promise((resolve, reject) =>{
  	/// xxxxxx 
  	return fun1()
});
function fun1(){
  console.log("enter fun1")
  return fun2()
}
function fun2(){
  console.log("enter fun2")
  return fun3()
}
function fun3(){
  console.log("enter fun3")
  return fun4()
}
function fun4(){
  console.log("enter fun4")
  return new Promise( (resolve, reject) => {resolve();console.log("in func4 finish resolve");})
}
pro.then(res => {console.log("outer promise")})

运行结果：注意没有输出“outer promise”

> "enter fun1"
> "enter fun2"
> "enter fun3"
> "enter fun4"
> "in func4 finish resolve"

重大修改！！！最外层的Promise这里我加入了resolve,这样的话外层的resolve终于也可以执行了

let pro = new Promise((resolve, reject) =>{
  	/// xxxxxx 
  	fun1()
    resolve()
});
function fun1(){
  console.log("enter fun1")
  return fun2()
}
function fun2(){
  console.log("enter fun2")
  return fun3()
}
function fun3(){
  console.log("enter fun3")
  return fun4()
}
function fun4(){
  console.log("enter fun4")
  return new Promise( (resolve, reject) => {resolve();console.log("in func4 finish resolve");})
}
pro.then(res => {console.log("outer promise")})

运行结果

> "enter fun1"
> "enter fun2"
> "enter fun3"
> "enter fun4"
> "in func4 finish resolve"
> "outer promise"

注意：我们的外层outer Promise里面返回一个inner Promise对象

那么这个两个不同的Promise都得分别写自己的resolve执行

 

Promise里面写return和不写return的区别？

代码演示

let pro = new Promise((resolve, reject) =>{
  	/// xxxxxx 
  	//fun1()
    resolve(11)
    return 22;
});
pro.then(res => {
  console.log(res);
  console.log("outer promise")})

!!!运行结果：竟然输出的是我们的11，不是我们return 的22

注意，这个res并不是Promise构造时return的值， 而是我们传入成功回调的参数

> 11
> "outer promise"

如果换成修改如下：

return resolve(11)

运行输出结果相同，所以可以不加return

Promise构造函数中return语句不生效

let pro = new Promise((resolve, reject) =>{
    resolve(11)
    return 22;
});
pro.then(res => {
  console.log(res);
  console.log("outer promise")
  return 33;
}).then(res => console.log(res))

运行结果

> 11
> "outer promise"
> 33