初识fetch

借鉴处

1.fetch的出现是为了解决什么问题？

解决古老的XHR不能实现的问题，语法更加简单明了。

fetch()方法提供了一种简单合理的方式来跨网络异步获取资源。

2.fetch是什么？

fetch是新的ajax解决方案。

fetch接受两个参数，第一个是获取资源的URL（必选），第二个是options对象（可选）

options对象下几个常用的属性：

• method: 请求使用的方法，如 GET、POST。（GET、POST请求的简单区别）
• headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
  （后面三种属性）

var url = 'http://......';

var headers = {
    Accept: 'image/jpeg'
};

fetch(url, {headers: headers}).then(function () {
  // ...
})

3.fetch和promise有什么关系？

fetch方法本身就会返回一个promise对象，所以它可以使用promise的所有方法，例如.then() .catch()

4.fetch和ajax有什么关系？

fetch是新的ajax解决方案。它相对于ajax来说语义更加简单明了，更能解决ajax所不能解决的一些问题。
以上仅仅只是个人理解，新手上路难免会有错误，做个记录而已

5.fetch的小例子

现在我只想用fetch从api获得数据而已，，，所以就只是写了个很简单的小例子

/*上海天气处可替换成其他东西，使用的是知乎上一个大佬用自己服务器转发的api
，就不用跨域了*/
fetch('http://wang.norma.shop:8080/api.php?key=free&appid=0&msg=上海天气')
//将所得数据转化为json
.then(response=>response.json())
//在控制台打印出已经转化为json的数据
.then(data=>console.log(data))

顺便说一句，引用这个api时，必须要作以下操作才行

<script src="exercise_jquery.js" charset="utf-8"></script>

charset=“utf-8” 这样才能正常运转

6. 简单的聊天机器人