Fetch基本用法

Fetch

在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，jquery的ajax其实是封装了XHR。

XMLHttpRequest(XHR)和jQuery的ajax存在回调地狱的问题，所以Fetch是我们最好的选择

fetch(...).then(fun2)
          .then(fun3) //各依赖有序执行
          .....
          .catch(fun)

Fetch API

Fetch不是Ajax，目的是为了代替Ajax，他是js内置的API，基于Fetch可以实现客户端和服务端的消息通信

Fetch使用说明

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

fetch api 返回的是一个promise对象

Options：

• methods：HTTP请求方法，默认为get
• body：HTTP的请求参数
• headers：HTTP的请求头，默认为{}
• credentials：默认为omit，忽略的意思，不带cookie；还有两个参数：same-orgin意思就是同源请求带cookie；include表示无论跨域还是同源都会带有cookie。
• status：HTTP返回的状态码，范围在100-599之间
• statusText：服务器返回的状态文字描述
• ok：如果状态码是以2开头，则为true
• headers：HTTP请求返回头
• body：返回体，如下是处理返回的一些方法
  • text()：将返回体处理成字符串类型
  • json()：返回结果和JSON.parse(rersponseText)一样
  • blob()：返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据
  • arrayBuffer()
  • formData()

兼容性：

IE 完全不支持fetch，移动端的很多也不支持

如果非要使用，必须使用fetch polyfill

Fetch是ES2018规范中新增API，浏览器支持不是很好，想要兼容好点，需要使用fetch polyfill