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