[TOC]
## 介绍
Web开发人员可以做的最强大的事情之一是从服务器获取数据并在其站点上创造性地显示它。在许多情况下，服务器仅存在于该特定站点。服务器可以包含博客帖子，用户数据，游戏的高分或其他任何内容。在其他情况下，服务器是一种开放服务，向想要使用它的任何人（即天气数据或股票价格）提供数据。在任何一种情况下，访问然后使用该数据的方法基本相同。
## 获取数据
那么我们如何实际将API中的数据导入我们的代码？
几年前，在代码中访问API数据的主要方法是使用`XMLHttpRequest`。此功能仍可在所有浏览器中使用，但不幸的是，使用它并不是特别好。语法如下所示：
~~~javascript
// Just getting XHR is a mess!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// Open, send.
request.open('GET', 'https://url.com/some/url', true);
request.send(null);
~~~
哎哟。那很痛苦。
开发人员感到不得不写出这些东西的痛苦，开始编写第三方库来处理这个并使其更容易使用。一些比较流行的图书馆是[请求](https://github.com/request/request)，[axios](https://github.com/mzabriskie/axios)和[superagent](https://github.com/visionmedia/superagent)，所有这些都有自己的优点和缺点。
然而，最近，Web浏览器已经开始实现一个新的本机函数来发出HTTP请求，这就是我们现在要使用和坚持的那个。见面：
~~~javascript
// URL (required), options (optional)
fetch('https://url.com/some/url')
.then(function(response) {
}).catch(function(err) {
// Error :(
});
~~~
如果您忘记了，请向上滚动并查看如何使用XHR执行相同的操作。当你欣赏漂亮和干净的代码是如何，注意`.then()`和`.catch()`功能存在。你还记得那些是什么吗？（PROMISES！）
## CORS
在我们开始将它放入代码之前的附注。出于安全原因，默认情况下，浏览器将HTTP请求限制为外部源（这正是我们在此尝试执行的操作）。我们需要做很少的设置才能完成抓取工作。了解这一点现在已超出我们的范围，但如果您想了解一下这个[维基百科文章](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)是一个不错的起点。
无论您是否绕道而行，了解Cross Origin资源共享（CORS）的所有内容，修复工作都很简单。使用fetch，您可以轻松地为选项提供JavaScript对象。它就在URL作为fetch函数的第二个参数之后：
```
fetch('url.url.com/api',{
mode:'cors'
})
```
`{mode: 'cors'}`如上所示，简单地添加URL后，将解决我们现在遇到的问题。但是，在将来，您可能希望进一步了解此限制的含义。
## 我们开工吧
现在，我们将把所有这些保存在一个HTML文件中。因此，继续创建一个空白图像标记和正文中的空脚本标记。
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="#">
<script>
</script>
</body>
</html>
~~~
在脚本标记中，让我们首先选择图像并将其分配给变量，以便我们可以在从Giphy API收到URL后更改URL。
~~~html
<script>
const img = document.querySelector('img')
</script>
~~~
使用上面的URL添加fetch也相对简单：
~~~html
<script>
const img = document.querySelector('img')
fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'})
.then(function(response) {
console.log(response.json())
})
</script>
~~~
您现在应该能够在浏览器中打开HTML文件，并且当您在页面上看不到任何内容时，您*应该*在控制台中记录一些内容。整个过程中最棘手的部分是破译如何从服务器的响应中获取所需的数据。在这种情况下，检查浏览器的控制台将显示返回的是*另一个*Promise ...获取我们需要另一个`.then()`函数的数据。
~~~html
<script>
const img = document.querySelector('img')
fetch('https://api.giphy.com/v1/gifs/translate?api_key=bb2006d9d3454578be1a99cfad65913d&s=cat', {mode: 'cors'})
.then(function(response) {
return response.json()
})
.then(function(response) {
console.log(response)
})
</script>
~~~
为了获得数据，我们需要向下钻取对象的层，直到找到我们想要的东西！
~~~html
<script>
const img = document.querySelector('img')
fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'})
.then(function(response) {
return response.json()
})
.then(function(response) {
console.log(response.data.images.original.url)
})
</script>
~~~
现在运行该文件应记录图像的URL。剩下要做的就是将页面上的图像源设置为我们刚刚访问过的URL：
~~~html
<script>
const img = document.querySelector('img')
fetch('https://api.giphy.com/v1/gifs/translate?api_key=111111&s=cats', {mode: 'cors'})
.then(function(response) {
return response.json()
})
.then(function(response) {
img.src = response.data.images.original.url
})
</script>
~~~
如果一切顺利，每次刷新时都应该在页面上看到一个新图像！
- 前言
- 你真的懂This吗？
- 对象和对象构造函数
- 工厂功能和模块模式
- API的使用
- async and await
- 关于async的很棒的一篇文章
- 掘金：关于forEach，map，fiter循环操作
- Node.js 实例与基础
- 原创： Express 学习使用笔记
- 零碎知识点方法
- 关于滚动吸顶的方法
- Vue学习笔记
- Vue向导
- vuex是啥？
- vue代码风格指南
- 关于vue的初体验
- 超详细解毒Vue
- Vue实例
- 模版语言
- 组件基础
- 条件渲染、列表渲染、Class与style绑定
- Todolist的制作超详细
- vue-router
- Vue基础2.0x 笔记
- 搭建vuepress
- JavaScript之ES6
- 箭头函数
- 这就是This