vue.js中怎么使用axios訪問api

本文小編為大家詳細(xì)介紹“vue.js中怎么使用axios訪問api”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue.js中怎么使用axios訪問api”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

1、在很多時(shí)候在我們要構(gòu)建應(yīng)用時(shí)都需要訪問一個(gè) API 并展示其數(shù)據(jù)。但是對(duì)于做這件事的方法有好幾種，下面我們來說下最流行的一種吧！使用基于 promise 的 HTTP 客戶端 axios 。然而在我們這次分享中，我們會(huì)使用 CoinDesk API 來完成展示比特幣價(jià)格且每分鐘更新的工作。

2、首先，我們要通過 npm/Yarn 或一個(gè) CDN 鏈接安裝 axios。

我們有很多種方式可以從 API 請(qǐng)求信息，但是最好首先確認(rèn)這些數(shù)據(jù)看起來長什么樣，以便進(jìn)一步確定如何展示它。從而我們會(huì)調(diào)用一次這個(gè) API 并輸出結(jié)果，以便我們能夠看清楚它。就像 CoinDesk 的 API 文檔中所說的，請(qǐng)求會(huì)發(fā)送到 https://api.coindesk.com/v1/bpi/currentprice.json。所以，我們首先創(chuàng)建一個(gè) data 里的 property 以最終放置信息，然后將會(huì)在 mounted 生命周期鉤子中獲取數(shù)據(jù)并賦值過去代碼如下：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})
<div id="app">
  {{ info }}
</div>

當(dāng)我們執(zhí)行完成之后會(huì)得到下面這樣：

{ "data": { "time": { "updated": "Jun 22, 2021 06:59:00 UTC", "updatedISO": "2021-06-22T06:59:00+00:00", "updateduk": "Jun 22, 2021 at 07:59 BST" }, "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org", "chartName": "Bitcoin", "bpi": { "USD": { "code": "USD", "symbol": "$", "rate": "32,793.0171", "description": "United States Dollar", "rate_float": 32793.0171 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "23,602.0854", "description": "British Pound Sterling", "rate_float": 23602.0854 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "27,576.1727", "description": "Euro", "rate_float": 27576.1727 } } }, "status": 200, "statusText": "", "headers": { "cache-control": "max-age=15", "content-length": "679", "content-type": "application/javascript", "expires": "Tue, 22 Jun 2021 07:01:07 UTC" }, "config": { "transformRequest": {}, "transformResponse": {}, "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "headers": { "Accept": "application/json, text/plain, */*" }, "method": "get", "url": "https://api.coindesk.com/v1/bpi/currentprice.json" }, "request": {} }

這樣子我們已經(jīng)得到的部分?jǐn)?shù)據(jù)，但是看起來卻很亂，那么接下來我們需要為它添加一些處理，以防出現(xiàn)異常情況或請(qǐng)求超時(shí)。

3、api數(shù)據(jù)展示

在正擦的情況下，我們需要的信息已經(jīng)包含在了響應(yīng)中，所以只需要遍歷我們保存下來的內(nèi)容就能正確地獲取。在下面這個(gè)例子中，我們就可以看到我們需要的價(jià)格信息在 response.data.bpi 中。如果我們換用這個(gè)，則輸出是下面這樣的：

js代碼部分如下：

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

亂碼部分如下：

{ "USD": { "code": "USD", "symbol": "$", "rate": "32,793.0171", "description": "United States Dollar", "rate_float": 32793.0171 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "23,602.0854", "description": "British Pound Sterling", "rate_float": 23602.0854 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "27,576.1727", "description": "Euro", "rate_float": 27576.1727 } }

通過上面的兩部分亂碼對(duì)比，我們發(fā)現(xiàn)第二次的亂碼會(huì)比第一次好了許多，這也讓展示的工作變得容易了很多，所以我們可以更新 HTML 以從獲取的數(shù)據(jù)中僅僅展示真正需要的信息。那么接下來我們會(huì)創(chuàng)建一個(gè)過濾器來確保小數(shù)部分的合理展示。代碼如下：

<div id="app">
  <h2>Bitcoin Price Index</h2>
  <div
    v-for="currency in info"
    class="currency"
  >
    {{ currency.description }}:
    <span class="lighten">
      <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </span>
  </div>
</div>

js代碼部分：

filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},

4、錯(cuò)誤處理

在很多的時(shí)候我們并沒有從API中獲取到自己想要的數(shù)據(jù)，這是有很多因素引起的，一下是有關(guān)于axios調(diào)用失敗的一些原因（但是不僅限于這些）：

• API不工作；

• 請(qǐng)求發(fā)錯(cuò)；

• API沒有按照我們的預(yù)期格式返回信息。

還有當(dāng)我們在發(fā)送請(qǐng)求的時(shí)候，我們應(yīng)該檢查一下上面提到的這些情況，并且在所有情況下都返回相應(yīng)的信息從而方便處理這些問題，一般我們在axios中會(huì)使用catch來做事件，代碼如下：

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

我們通過這樣的設(shè)置我們就可以知道請(qǐng)求API的過程中是否有地方出錯(cuò)了，那么如果數(shù)據(jù)長時(shí)間生成不出來或者API不工作會(huì)是怎么樣的呢？下面我們就來構(gòu)建在無法獲取數(shù)據(jù)時(shí)通知用戶的加載效果，代碼如下：

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

Html部分代碼：

<div id="app">
  <h2>Bitcoin Price Index</h2>

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-if="loading">Loading...</div>

    <div
      v-else
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>
  </section>
</div>

我們可以在例子中點(diǎn)擊 Rerun 按鈕以便看到我們從 API 獲取數(shù)據(jù)時(shí)的加載狀態(tài)。

5、替代方案

Fetch API 

對(duì)于Fetch API 它是一個(gè)用于此類請(qǐng)求的強(qiáng)大的原生 API。它的好處就是你不需要在使用它的時(shí)候額外加載一個(gè)外部資源。但是的話目前它還沒有被瀏覽器完全支持，所以我們?nèi)匀恍枰粋€(gè) polyfill。

讀到這里，這篇“vue.js中怎么使用axios訪問api”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。