在vue.js中如何使用axios访问api？如何使用axios访问api经验分享！

2021-06-22 15:45:49 浏览数 (4)

相信很多人都有听过api连接，那么今天我们就来说说有关于“在vue.js中如何使用axios访问api？”这个问题吧！下面小编整理的相关资料希望对大家有所帮助！

1、在很多时候在我们要构建应用时都需要访问一个 API 并展示其数据。但是对于做这件事的方法有好几种，下面我们来说下最流行的一种吧！使用基于 ​promise​ 的 HTTP 客户端 axios 。然而在我们这次分享中，我们会使用 ​CoinDesk API​ 来完成展示比特币价格且每分钟更新的工作。

2、首先，我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。

我们有很多种方式可以从 API 请求信息，但是最好首先确认这些数据看起来长什么样，以便进一步确定如何展示它。从而我们会调用一次这个 API 并输出结果，以便我们能够看清楚它。就像 CoinDesk 的 API 文档中所说的，请求会发送到 https://api.coindesk.com/v1/bpi/currentprice.json。所以，我们首先创建一个 ​data​ 里的 ​property​ 以最终放置信息，然后将会在 mounted 生命周期钩子中获取数据并赋值过去代码如下：

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>

当我们执行完成之后会得到下面这样：

{ "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": "&#36;", "rate": "32,793.0171", "description": "United States Dollar", "rate_float": 32793.0171 }, "GBP": { "code": "GBP", "symbol": "&pound;", "rate": "23,602.0854", "description": "British Pound Sterling", "rate_float": 23602.0854 }, "EUR": { "code": "EUR", "symbol": "&euro;", "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": {} }

这样子我们已经得到的部分数据，但是看起来却很乱，那么接下来我们需要为它添加一些处理，以防出现异常情况或请求超时。

3、api数据展示

在正擦的情况下，我们需要的信息已经包含在了响应中，所以只需要遍历我们保存下来的内容就能正确地获取。在下面这个例子中，我们就可以看到我们需要的价格信息在 response.data.bpi 中。如果我们换用这个，则输出是下面这样的：

js代码部分如下：

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

乱码部分如下：

{ "USD": { "code": "USD", "symbol": "&#36;", "rate": "32,793.0171", "description": "United States Dollar", "rate_float": 32793.0171 }, "GBP": { "code": "GBP", "symbol": "&pound;", "rate": "23,602.0854", "description": "British Pound Sterling", "rate_float": 23602.0854 }, "EUR": { "code": "EUR", "symbol": "&euro;", "rate": "27,576.1727", "description": "Euro", "rate_float": 27576.1727 } }

通过上面的两部分乱码对比，我们发现第二次的乱码会比第一次好了许多，这也让展示的工作变得容易了很多，所以我们可以更新 HTML 以从获取的数据中仅仅展示真正需要的信息。那么接下来我们会创建一个过滤器来确保小数部分的合理展示。代码如下：

<div id="app">
  <h1>Bitcoin Price Index</h1>
  <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、错误处理

在很多的时候我们并没有从​API​中获取到自己想要的数据，这是有很多因素引起的，一下是有关于​axios​调用失败的一些原因（但是不仅限于这些）：

  • API不工作；
  • 请求发错；
  • API没有按照我们的预期格式返回信息。

还有当我们在发送请求的时候，我们应该检查一下上面提到的这些情况，并且在所有情况下都返回相应的信息从而方便处理这些问题，一般我们在​axios​中会使用​catch​来做事件，代码如下：

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

我们通过这样的设置我们就可以知道请求​API​的过程中是否有地方出错了，那么如果数据长时间生成不出来或者​API​不工作会是怎么样的呢？下面我们就来构建在无法获取数据时通知用户的加载效果，代码如下：

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">
  <h1>Bitcoin Price Index</h1>

  <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>

我们可以在例子中点击 ​Rerun​ 按钮以便看到我们从 ​API​ 获取数据时的加载状态。

5、替代方案

Fetch API 

对于Fetch API 它是一个用于此类请求的强大的原生 API。它的好处就是你不需要在使用它的时候额外加载一个外部资源。但是的话目前它还没有被浏览器完全支持，所以我们仍然需要一个 polyfill。

总结：

以上就是有关于“在vue.js中如何使用axios访问api？”这个问题的相关内容，当然如果你有其他的看法也可以提出来和大家一起分享！更多有关于vue.js的相关知识内容我们都可以在W3CSCHOOL中进行学习和了解。


相关资料链接：

CoinDesk API ：https://www.coindesk.com/coindesk-api

vue过滤器：https://cn.vuejs.org/v2/api/#Vue-filter


Vue.js

0 人点赞