chenhuiYj / chenhuiYj/note

ES6之promise

Open
#34 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
6
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

promise的构造函数是同步执行,promise.then中的函数是异步执行(微任务)。

1.优略势

试想一下,如果有以下的一个场景,一个人先起床,起床了就去刷牙吃饭。如果觉得太困了就继续睡觉。代码大概如下

getUp(

    {

        success:function(res){

            brushTeeth(

                eat()

            )

        },

        fail:function(err){

            sleep()

        }

    }

)

现实开发中,业务代码肯定比getUp,brushTeeth,eat复杂很多很多。这就可能会导致回调地狱的出现,代码的可维护性也很差。而promise的出现就解决了这个问题。

let result=true

let getUp= new Promise((resolve,reject)=>{

    if(result){

        resolve()

    } else{

        reject()

    }

})

 

getUp.then(res=>{

    return brushTeeth()

})

.then(res=>{

    return eat()

})

.catch(err=>sleep())

Promise 的then的链式调用就很好的避免了回调地狱,以及增加了代码的可读性。

2.状态:

promise拥有pending-进行中,fulfilled-已完成,rejected-已错误三种状态。状态不可逆,一个promise,一旦从pending进入fulfilled或者rejected,那么就不能再回到pending。

let result=true

let list=[1,2,3]

function getData() {

    return new Promise((resolve,reject)=>{

        setTimeout(()=>{

            if(result){

                resolve(list)

            } else {

                reject('请求失败')

            }

        },1000)

    })

}

 

let request1=getData()

 

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

 

//过了一秒后,再打印

//由于result为true,进入if,执行resolve,Promise 状态变成fulfilled

console.log(request1)
//Promise {<fulfilled>: Array(3)}
//PromiseResult: [1,2,3]


重新创建一个request2,并且result改成false

result=false

let request2=getData()

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

 

//过了一秒后,再打印

//由于result为true,进入if,执行reject,Promise 状态变成rejected

console.log(request2)
//Promise {<rejected>: '请求失败'}
//PromiseResult :"请求失败"

状态无法改变,但值一直都在。在.then 里面return一个值,那么下一个.then还可以接收到。

let promise1=new Promise((resolve,reject)=>{

    resolve(123)

}).then(res=>{

    console.log(res)

    return res+1

}).then(res=>{

    console.log(res)

    return res+1

}).then(res=>{

    console.log(res)

    return res+1

})

 

//123

//124

//125

 

promise1//Promise {<fulfilled>: 126}

promise1.then(res=>console.log(res))//126

promise1.then(res=>{

    console.log(res)

    return res+1

})

//127

promise1//Promise {<fulfilled>: 126}

promise1=promise1.then(res=>{

    console.log(res)//127

    return res+1

})

promise1//Promise {<fulfilled>: 127}

 

promise1=promise1.then(res=>{

    console.log(res)//127

    return res+1

}).then(res=>{

    console.log(res)//128

    return res+1

}).then(res=>{

    console.log(res)//129

})
//没有继续return,所以后面显示undefined
promise1//Promise {<fulfilled>: undefined}

3.其他Promise方法

Promise.all([promise1,promise2,promise3]):当所有promise都返回resolve后,Promise.all才会返回resolve,任意一个或者几个返回reject,Promise.all就会返回reject。

Promise.race([promise1,promise2,promise3]):看哪个promise返回得更快(状态改变得更快),以第一次返回/改变状态得promise为结果。如果第一个返回的promise返回fulfilled,那么Promise.race就是fulfilled。如果第一个返回的promise返回rejected,那么Promise.race就是rejected

Promise.allSettled([promise1,promise2,promise3]):与Promise.all类似,但Promise.allSettled不会因为某一个reject而结束,而是等所有的promise都返回之后,才结束,不管每个promise是fulfilled还是reject。

Promise.any([promise1,promise2,promise3]):只要promise有一个变成fulfilled状态,包装实例就会变成fulfilled状态;如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。

Promise.resolve():将现有对象转为 Promise 对象

Promise.resolve('foo')

// 等价于

new Promise(resolve => resolve('foo'))

1.如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

2.参数是一个thenable对象。

let thenable = {

  then: function(resolve, reject) {

    resolve(42);

  }

};

Promise.resolve()方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then()方法


let thenable = {

  then: function(resolve, reject) {

    resolve(42);

  }

};

 

let p1 = Promise.resolve(thenable);

p1.then(function (value) {

  console.log(value);  // 42

});

3.如果参数是一个原始值,或者是一个不具有then()方法的对象,则Promise.resolve()方法返回一个新的 Promise 对象,状态为resolved。


const p = Promise.resolve('Hello');

 

p.then(function (s) {

  console.log(s)

});

// Hello

4.不带有任何参数Promise.resolve()直接返回一个resolved状态的 Promise 对象。

const p = Promise.resolve();

 

p.then(function () {

  // ...

});

 

Promise.reject():方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

 

const p = Promise.reject('出错了');

// 等同于

const p = new Promise((resolve, reject) => reject('出错了'))

 

p.then(null, function (s) {

  console.log(s)

});

// 出错了

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file or test is named. First inspect the repository structure and existing JavaScript or ES6 notes to find the expected location and format for this Promise article. Done means the article is placed in the appropriate documentation area and matches the surrounding notes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.