Promise 的使用

2020-02-20  本文已影响0人  柚子硕

Promise是解决异步的一种方案,可以更优雅的解决多个请求回调的问题,提高代码可读性。有 async/await 和 axios 现在基本用不到 Promise。(axios 拥有 Promsie 相同的 API)

1.提高可读性,看上去舒服一点。
function request(url,successFun, errorFun) {
    $.ajax({
        type: 'GET',
        url:url,
        param: {},
        success: successFun,
        error: errorFun
    });
}

request('url1',(res)=>{ console.log("成功后做一些什么")},(err)=>{console.log("失败了做一些事") })

//使用 Promise
function requestPromise (url) {
    return new Promise((resolve, reject)=> {
      $.ajax({
         type: 'GET',
          url: url,
          param: {},
          success: res => { resolve(res ) },
          error: err => { reject(err) }
      });
    });
}
requestPromise('url1').then((res) => { console.log("成功后做一些什么") }).catch((err) => {console.log("失败了做一些事")})
链式编程的意思, .then调用多个请求(都是Promise实例)
requestPromise('url1').then((res) => { 
    console.log("成功后我再走 url2 接口")
    return requestPromise('url2')
 }).then((res) => { 
    console.log("成功后我再走 url3 接口")
    return requestPromise('url3')
}).catch(err => { console.log("报错触发,后面都不在执行") })
2.Pomise.all()

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组(顺序和Promise实例参数顺序一致),而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是p1')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是p2')
  }, 500)
})

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['我是p1', '我是p2']
}).catch((error) => {
  console.log(error)
})
3.Promise.race()

传参和 all()一样,不同的是无论 resolve 还是 reject 只返回第一个有结果的值,race -- 比赛。

4.Promise.resolve()

将一个包含请求的对象转为 Promise 对象。或者你想使用 .then() 做后续操作。
在主线程任务执行完之后立马执行 Promise.resolve 的 .then ,最后执行其他异步任务。可以用来优化一些视图更新。

Promise.resolve(data ? data : getDataFn()).then() 
5.Promise.reject()

也是可以将一个对象转为 Promise 对象,抛出错误。暂时没发现有什么用。。。

6.其他

Promise.resolve 比 new Promise 快。
Promise 的API都是微任务。
最好使用 .then() 操作回调。

上一篇 下一篇

猜你喜欢

热点阅读