天天看点

es6 关乎promise

1.promise是干嘛的?

promise是异步编程的一种解决办法

什么情况下会用到promise?

要用到异步操作的时候

2.promise简单使用过程(第一种写法)

//链式编程
    //Promise在创建时要传入一个函数
      new Promise((resolve, reject) => {     //resolve,reject也是函数
        //这里写第一次请求的代码
        resolve('hello promise')
        //成功后调用resolve()  一旦我们调用了resolve函数,就会调用then  then(然后,下一步)  then也是个函数 resolve可传参  .then能接收到
        reject('error')
        //失败后调用reject()  一旦调用了reject  就会调用  catch()
    }).then((data) => {
        //第一次拿到结果后处理的代码
        return new Promise((resolve, reject) => {
            //第二次请求的代码
            resolve()
        })
    }).then(() => {
            //第二次拿到结果后处理的代码
    }).catch((err) => {
       console.log(err)
    })

           

3.promise的三种状态

  • pending:等待状态比如 正在进行网络请求 计时器时间没到
  • fulfill:满足状态,当我们主动回调了resolve时就会处于该状态 回调.then
  • reject:拒绝状态,当我们主动回调了reject时就会处于该状态 回调.catch

4.第二种写法

new Promise((resolve,reject) =>{
    resolve()
    reject()
}).then(data =>{
    //成功
},err =>{
    //失败
})
           

5.resolve简写

new Promise((resolve, reject) => {
        resolve(res)
    }).then( res => {
       return Promise.resolve(res+"111")
    }).then(res => {
       return Promise.resolve(res+"222")
    })
           
new Promise((resolve, reject) => {
        resolve()
    }).then(data => {
       return data+"111"
    }).then(res => {
        return res+"222"
    })
           

6.reject简写

new Promise((resolve, reject) => {
    resolve()
}).then(data => {
   return Promise.reject('error')
}).then(res => {
    return res+"222"
}).catch(err => {
    console.log(err)
})
           
new Promise((resolve, reject) => {
        resolve()
}).then(data => {
        throw  'error'   //手动抛出异常
}).then(res => {
        return res+"222"
}).catch(err => {
        console.log(err)
})
           

7.promise all

Promise.all([  //里面是数组
    new Promise((resolve, reject) =>{
        $ajax({
            url:'url1',
            success(data){
                resolve(data)
            }
        })
    }),
    new Promise((resolve, reject) =>{
        $ajax({
            url:'url2',
            success(data){
                resolve(data)
            }
        })
    }).then(results =>{   //results是数组
        results[0]  //第一个ajax得到的值
        results[1]  //第二个ajax得到的值
    })
])
           
es6