简单的写一个fetch请求数据

fetch是出现在ajax之后的东西，且功能比ajax强大，既然这样子的话，它总要具备ajax的功能，然后具备自己独特的功能把。

简单的写一个请求数据，以及拿到数据后如何渲染网页。我将讲解步骤，不提供代码啦。

用'!'生成html模板，在body标签下写button和img标签。

然后用sctipt标签来写js代码，首先获取button和img标签，document.querySelector('button')

document.querySelector('img') 

接下来是关键点啦，另外说明一点的是，可以自己给标签添加一些样式，好看一点。

请求地址：'https://dog.ceo/api/breeds/image/random'

那么就把请求地址直接放到fectch函数里面，fetch('https://dog.ceo/api/breeds/image/random') 

此时，我们不知道fetch函数的返回值长什么样，或者没有返回值？ 

这时候，我们命名一个变量，然后把函数赋值给这个变量，并且打印出这个变量。

let promise = fetch('https://dog.ceo/api/breeds/image/random') ;console.log(promise )

打开浏览器一看，是个promise，熟悉promise的人知道这个对象有三个东西，第一个打开里面都是方法，第二个是状态，第三个是response，也就是响应的数据，那么就说明fetch这个函数给我们返回了带有数据的promise对象。

接下来我们调用then方法来拿到数据。可以看一下响应的内容，好家伙，看不懂，那么怎么办？打退堂鼓？不要慌，因为一般请求的数据都是json格式的，它是通用格式，便于不同的编程语言去进行转换，那么就需要把这个数据转换为我们需要的js数据格式

接下来，我们调用json方法来转换，并且将数据返回，返回的结果也是个promise对象，因此，我们继续调用then方法来进行操作，把拿到数据的message属性的值赋给img的src属性。

经过一系列的操作，请求就完成了，这是一个简单的请求！！！