如何在实际项目中使用Promise（入门级）

你们有没有遇到过这样的情况，ES6看过了，Promise的文字概念都懂，但是我要怎么在项目中去写一个Promise呢？

那天我就是带着这样的疑问去网上搜了下。最后成功地在项目中应用了Promise，只有实际成功使用一次，才能明白它的前因后果，明白它的用途。

1.这是一个vue的电商项目-商品详情页

我写了个方法调库存接口。

通常情况，异步请求完毕，直接处理结果。但现在我需要在不同的地方调用，对结果进行不同的处理。所以我在getStock方法里返回一个promise,也就是把getStock方法里axios.get异步请求的结果直接返回。

getStock(region_id, product_id) {

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

    axios.get('/index.php/storage-stock.html', {

      params: {

        area_id: region_id,

        product_id: [product_id]

      }

    }).then(function (res) {

      resolve(res)

    }).catch(function (error) {

      reject(error)

    })

  })

}

这里请注意关键点，.then() 里面的 resolve(res)

2.以下是一个调用的地方：

this.getStock(REGION_ID, this.product_id).then((res) => {

  if (res.data.data) {

    const data = res.data.data

    if (data.length > 0) {

      this.goodsInfo = data[0]

      this.stock = data[0].stock

      this.stock_total = data[0].stock_total

      this.is_danger = data[0].is_danger

      this.marketable = data[0].marketable

    } else {

      this.stock = 0

    }

  }

})

这里.then() 里面的res 就是getStock方法的返回值。

3.另一个调用的地方：

this.getStock(region_id, product_id).then((res) => {

  if (res.data.data) {

    const data = res.data.data

    if (data.length > 0) {

      that.stock = data[0].stock

      that.stock_total = data[0].stock_total

    } else {

      that.stock = 0

    }

  }

})

这样就可以分别在不同的地方处理一个异步请求的返回值了。

巴特西

如何在实际项目中使用Promise（入门级）

最新文章

热门文章