Translated cookbook-using-axios-to-consume-apis.md #693

Jinjiang · 2018-03-21T09:14:57Z

Thanks.

Justineo · 2018-04-15T03:29:59Z

src/v2/cookbook/using-axios-to-consume-apis.md

@@ -1,16 +1,16 @@
 ---
-title: Using Axios to Consume APIs
+title: 使用 Axios 访问 API


Justineo · 2018-04-15T03:31:57Z

src/v2/cookbook/using-axios-to-consume-apis.md


-There are many times when building application for the web that you may want to consume and display data from an API. There are several ways to do so, but a very popular approach is to use [axios](https://github.com/axios/axios), a promise-based HTTP client.
+你可能在构建应用程序的时候有很多次需要访问一个 API 并展示其数据。我们有很多种方法做这件事，而使用基于 promise 的 HTTP 客户端 [axios](https://github.com/axios/axios) 则是众多方法中比较流行的一个。


有很多时候你在构建应用时需要访问一个 API 并展示其数据

做这件事的方法有好几种？

是其中非常流行的一种

Justineo · 2018-04-15T03:34:25Z

src/v2/cookbook/using-axios-to-consume-apis.md


-In this exercise, we'll use the [CoinDesk API](https://www.coindesk.com/api/) to walk through displaying Bitcoin prices, updated every minute. First, we'd install axios with either npm/yarn or through a CDN link.
+在本次实践中，我们会使用 [CoinDesk API](https://www.coindesk.com/api/) 来完成展示比特币价格且每分钟更新的工作。熟悉，我们要通过 npm/yarn 或一个 CDN 链接安装 axios。


熟悉 → 首先

Justineo · 2018-04-15T03:35:12Z

src/v2/cookbook/using-axios-to-consume-apis.md


-There are a number of ways we can request information from the API, but it's nice to first find out what the shape of the data looks like, in order to know what to display. In order to do so, we'll make a call to the API endpoint and output it so we can see it. We can see in the CoinDesk API documentation, that this call will be made to `https://api.coindesk.com/v1/bpi/currentprice.json`. So first, we'll create a data property that will eventually house our information, and we'll retrieve the data and assign it using the `mounted` lifecycle hook:
+我们有很多种方式可以从 API 请求信息，但是我们最好首先确认这些数据的样子，以便进一步确定如何展示它。为了做到这一点，我们会调用一次这个 API 病输出结果，以便我们能够看清楚它。我们查阅了 CoinDesk 的 API 文档，发现其请求是发送到 `https://api.coindesk.com/v1/bpi/currentprice.json` 的。所以，我们首先创建一个 data 里的属性以最终放置我们的信息，然后我们将会在 `mounted` 生命周期钩子中获取数据并赋值过去：


删掉一些“我们”？

确认这些数据看起来长啥样？

为了做到这一点 → 为此？

病 → 并

如 CoinDesk 的 API 文档所述，请求会发送到……

Justineo · 2018-04-15T03:38:55Z

src/v2/cookbook/using-axios-to-consume-apis.md


 <p data-height="350" data-theme-id="32763" data-slug-hash="80043dfdb7b90f138f5585ade1a5286f" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="First Step Axios and Vue" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/80043dfdb7b90f138f5585ade1a5286f/">First Step Axios and Vue</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>

-Excellent! We've got some data. But it looks pretty messy right now so let's display it properly and add some error handling in case things aren't working as expected or it takes longer than we thought to get the information.
+很好！我们已经得到了一些数据。但是它看起来还比较乱，所以我们会更好的展示它并添加一些错误处理，以应对事情未如我们所愿或请求超时的情形。


以防出现异常情况 (未如我们所愿的意译)

Justineo · 2018-04-15T03:54:46Z

src/v2/cookbook/using-axios-to-consume-apis.md

@@ -98,7 +98,7 @@ axios
  .catch(error => console.log(error))
 ```

-This will let us know if something failed during the API request, but what if the data is mangled or the API is down? Right now the user will just see nothing. We might want to build a loader for this case, and then tell the user if we're not able to get the data at all.
+这样我们就会知道在请求 API 的过程中是否有地方出错了，不过当数据长时间生成不出来或 API 不工作的时候会怎样呢？现在用户高将会什么都看不到。我们可能想为这种情况构建一个加载效果，然后告诉用户我们还无法获取数据。


现在用户高将会

然后在根本无法获取数据时通知用户。

Justineo · 2018-04-15T03:57:47Z

src/v2/cookbook/using-axios-to-consume-apis.md

@@ -152,21 +152,21 @@ new Vue({
 </div>
 ```

-You can hit the rerun button on this pen to see the loading status briefly while we gather data from the API:
+你可以重复点击按钮并在我们从 API 获取数据时清晰的看到加载中的状态：


你可以在下面的例子中点击 Rerun 按钮（CodePen 的按钮名字）来看到我们从 API 获取数据时的加载状态。

Justineo · 2018-04-15T03:58:55Z

src/v2/cookbook/using-axios-to-consume-apis.md


 <p data-height="300" data-theme-id="32763" data-slug-hash="6c01922c9af3883890fd7393e8147ec4" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Fourth Step Axios and Vue" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/6c01922c9af3883890fd7393e8147ec4/">Fourth Step Axios and Vue</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>

-This can be even futher improved with the use of components for different sections and more distinct error reporting, depending on the API you're using and the complexity of your application.
+我们还可以从不同的层次更加深入的改进这个组件的用法，并依赖你使用的 API 以及整个应用的复杂度提供更清晰的错误处理，


原文 further 拼错了 :P

我们还可以做进一步优化，如用组件来实现不同部分、给出更明确的错误报告。这都取决于你使用的是哪个 API，以及应用的复杂程度。

Justineo · 2018-04-15T04:01:40Z

src/v2/cookbook/using-axios-to-consume-apis.md


 ### Fetch API

-The [Fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don't need to load an external resource in order to use it, which is true! Except... that it's not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.
+[Fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) 是一个强大的原声 API，适用于这种类型的请求。你可能听说过 Fetch API 其中的一个好处，就是你不需要在使用它的时候额外加在一个外部资源，除非浏览器还不支持这个 API，因为这时你需要一个 polyfill。使用这个 API 还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。


原声 → 原生

是一个用于此类请求的强大的原生 API？

额外加在 → 额外加载

……外部资源。确实如此！但是……目前它还没有被浏览器完全支持，所以你仍然需要使用一个 polyfill。

gotcha 我建议译为「坑」

会稍微觉得“坑”有些口语化了，个人觉得还是保留“注意事项”吧，或者再想个别的书面一点都词

gotcha 就是口语呀

我还是觉得“坑”这个字放在这里显得稍微俗气了一些……😅
如果你觉得注意事项可以接受的话，我们就先用注意事项如何？

Justineo · 2018-04-15T04:16:38Z

src/v2/cookbook/using-axios-to-consume-apis.md


-There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have write access, and many other benefits. Due to the straightforward integration of these two libraries, it's become a very common choice for developers who need to integrate HTTP clients into their workflow.
+其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 交流，向一个有写权限的 API 发送 post/edit/delete 请求等等。将这两个库直接集成起来使用会成为开发者集成 HTTP 客户端到他们的工作流时的一种非常普遍的选择，


交流 → 通信

向一个有写权限的 API 发送发布/编辑/删除请求

由于这两个库的集成很简单直接，(这种集成) 便成为需要在工作流中集成 HTTP 客户端的开发者的常见选择了。

这里的 post/edit/delete 应该是 HTTP 协议的一部分，所以我保留了，没有翻译，你觉得 OK 吗？

HTTP 里没有 edit 呀

是不是想写 put 笔误了，我先在英文版问一下好了

我感觉这里的语境不应该引入 HTTP header 吧，讲的是结合两个库可以干什么事，并不需要涉及底层细节？因为前面说的是不止是展示，那么后面就应该对应发布/编辑/删除。

不纠结了，我改成“发布/编辑/删除”了

Justineo · 2018-04-16T14:46:41Z

post/edit/delete 那个我觉得要翻译，因为 edit 并不是 HTTP header 呀。

translated cookbook-using-axios-to-consume-apis.md

4aafe77

Jinjiang requested a review from Justineo March 21, 2018 09:14

Justineo reviewed Apr 15, 2018

View reviewed changes

Update using-axios-to-consume-apis.md

44a107a

Update using-axios-to-consume-apis.md

be0b52e

Justineo approved these changes Apr 17, 2018

View reviewed changes

Jinjiang merged commit 0e4a7da into master Apr 17, 2018

Jinjiang deleted the cookbook-axios branch April 17, 2018 10:49


		There are many times when building application for the web that you may want to consume and display data from an API. There are several ways to do so, but a very popular approach is to use [axios](https://github.com/axios/axios), a promise-based HTTP client.
		你可能在构建应用程序的时候有很多次需要访问一个 API 并展示其数据。我们有很多种方法做这件事，而使用基于 promise 的 HTTP 客户端 [axios](https://github.com/axios/axios) 则是众多方法中比较流行的一个。


		In this exercise, we'll use the [CoinDesk API](https://www.coindesk.com/api/) to walk through displaying Bitcoin prices, updated every minute. First, we'd install axios with either npm/yarn or through a CDN link.
		在本次实践中，我们会使用 [CoinDesk API](https://www.coindesk.com/api/) 来完成展示比特币价格且每分钟更新的工作。熟悉，我们要通过 npm/yarn 或一个 CDN 链接安装 axios。


		There are a number of ways we can request information from the API, but it's nice to first find out what the shape of the data looks like, in order to know what to display. In order to do so, we'll make a call to the API endpoint and output it so we can see it. We can see in the CoinDesk API documentation, that this call will be made to `https://api.coindesk.com/v1/bpi/currentprice.json`. So first, we'll create a data property that will eventually house our information, and we'll retrieve the data and assign it using the `mounted` lifecycle hook:
		我们有很多种方式可以从 API 请求信息，但是我们最好首先确认这些数据的样子，以便进一步确定如何展示它。为了做到这一点，我们会调用一次这个 API 病输出结果，以便我们能够看清楚它。我们查阅了 CoinDesk 的 API 文档，发现其请求是发送到 `https://api.coindesk.com/v1/bpi/currentprice.json` 的。所以，我们首先创建一个 data 里的属性以最终放置我们的信息，然后我们将会在 `mounted` 生命周期钩子中获取数据并赋值过去：


		There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have write access, and many other benefits. Due to the straightforward integration of these two libraries, it's become a very common choice for developers who need to integrate HTTP clients into their workflow.
		其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 交流，向一个有写权限的 API 发送 post/edit/delete 请求等等。将这两个库直接集成起来使用会成为开发者集成 HTTP 客户端到他们的工作流时的一种非常普遍的选择，

Translated cookbook-using-axios-to-consume-apis.md #693

Translated cookbook-using-axios-to-consume-apis.md #693

Conversation

Jinjiang commented Mar 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jinjiang Apr 16, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Justineo commented Apr 16, 2018

Jinjiang Apr 16, 2018 •

edited

Loading