Question

我是 Vue 的新手，并且正在使用电子vue样板。我正在尝试使用NodeJS中的 Promise 在Amazon中显示一些项目。我正在使用“ amazon-product-api”，是的，我可以访问Amazon Product Advertising API。我已将代码编写在单独的.js文件中，并已链接到Vue组件。

这是我使用amazon-product-api获得ItemSearch的功能，

// This function will take take idea and give stats in return
// @input string
// @return json
function getKeywordStats (keyword, searchType, delay, domain) {
  // Setting URL and headers for request
  if (searchType === 0) {
    searchType = 'KindleStore'
  } else {
    searchType = 'Books'
  }

  if (domain === 'com') {
    domain = 'webservices.amazon.com'
  } else if (domain === 'de') {
    domain = 'webservices.amazon.de'
  } else if (domain === 'uk') {
    domain = 'webservices.amazon.uk'
  }

  var query = {
    keywords: keyword,
    searchIndex: searchType,
    sort: 'relevancerank',
    itemPage: 1,
    availability: 'Available',
    responseGroup: 'Large',
    domain: domain
  }
  return new Promise(function (resolve, reject) {
    amazonClient.itemSearch(query, function (error, results) {
      if (error) {
        console.log(error)
      } else {
        var title = results[0].ItemAttributes[0].Title[0]
        var imageUrl = results[0].ItemAttributes[0].Title[0]
        var data = {
          title: title,
          imageUrl: imageUrl
        }
        // console.log(results)
        // var noCompetitors = results.ItemAttributes.Items.TotalResults
        resolve(data)
      }
    })
  })
}

这是我的Vue组件

<template>
    <div class='hello'>
        <p> {{data}} </p>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
// ebook data - 0
// book data - 1

var amazon = require('../../controllers/amazon-service.js')

var keywordDictionary = {}

var getStats = amazon.getKeywordStats('trump aftershock', 0, null, 'de')
console.log()

export default {
  data () {
    return {
      data: [
        {
          terms: getStats
        }
      ]
    }
  }
}
</script>

<style>
.hello {
  color: blue
}
</style>

运行此命令时，我可以在Vue组件中显示promise数据。这就是它在页面上的显示方式。

[ { "terms": { "isFulfilled": true, "isRejected": false, "fulfillmentValue": { "title": "Trump Aftershock: The President's Seismic Impact on Culture and Faith in America (English Edition)", "imageUrl": "Trump Aftershock: The President's Seismic Impact on Culture and Faith in America (English Edition)" } } } ]

但是我无法获得“ fulfillmentValue ”。我将附上一些屏幕截图，这将有助于解决此问题。如果我做错了，请引导我走正确的路。

应用显示的内容-

验证了JSON响应-

Answer 1

Amazon API函数getKeywordStats返回一个Promise –这是一个异步操作。这意味着该函数不会像普通的同步函数那样返回结果，而是返回一个Promise对象，您可以注册一个回调函数（通过then），以在检索到数据后立即调用。确保阅读有关诺言如何运作的内容；因为已经有很多关于它们的信息，所以在这里我将不做详细介绍。

将API调用移至组件created钩子中：

export default {
  data() {
    return {
      terms: null
    }
  },

  created() {
    amazon.getKeywordStats('trump aftershock', 0, null, 'de').then(terms => {
      this.terms = terms
    })
  }
}

访问JSON的completionValue值

1 个答案: