ajax还在用吗,你还在用AJAX吗？Fetch了解一下

什么是Fetch

一句话总结：Fetch是XMLHttpRequest一个更先进的替代方案(A Modern Replacement for XMLHttpRequest)。

fetch是全局变量window的一个方法，用来发起网络请求、获取资源，是传统基于XMLHttpRequest对象的AJAX技术的更优替代方案。

fetch暂时不支持abort request。

使用方法

先看一个最简单的get用法示例：

// url (required), options (optional)

fetch('https://davidwalsh.name/some/url', {

method: 'get'

}).then(function(response) {

}).catch(function(err) {

// Error :(

});

下面是一个稍微复杂的post用法示例：

fetch(url, {

method: "POST",

body: JSON.stringify(data),

headers: {

"Content-Type": "application/json"

},

credentials: "same-origin"

}).then(function(response) {

response.status     //=> number 100-599

response.statusText //=> String

response.headers    //=> Headers

response.url        //=> String

return response.text()

}, function(error) {

error.message //=> String

})

fetch使用Promises来处理response。fetch接收两个参数：

url：string类型，必选，发起请求的地址

options：object类型，可选，请求的配置参数

还可以使用Request对象实例作为参数的方式发起fetch请求：

var request = new Request(url, options);

fetch(request).then(function(response) {

// handle with response...

}).catch(function(err) {

// Error :(

});

Options配置项

options可以配置以下参数：

1.method (String) - HTTP 请求方法，默认："GET"

2.body (String, body types) - HTTP 请求主体，示例：

{

body: new URLSearchParams([['foo', 1], ['bar', 2]]).toString()

}

body的类型包括：

Class

Default Content-Type

String

text/plain;charset=UTF-8

URLSearchParams

application/x-www-form-urlencoded;charset=UTF-8

FormData

multipart/form-data

Blob

inherited from the blob.type property

ArrayBuffer

TypedArray

DataView

其他数据结构需要预先编码为上述类型之一。例如，JSON.stringify(data)可用于将数据结构序列化为JSON字符串。

3.headers (Object, Headers) - 请求头，默认：{}，示例：

{

headers: new Headers({

'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交

})

}

headers提供以下方法增删改查头部信息：

has(name) (boolean)

get(name) (String)

set(name, value)

append(name, value)

delete(name)

forEach(function(value, name){ ... }, [thisContext])

4.credentials (String) - 跨域请求时方身份验证凭证模式，默认："omit"

"omit" - 请求中不携带身份验证凭证(例如cookies)

"same-origin" - 在对同一站点的请求中包含身份验证凭证

"include" - 在所有站点的请求中包含身份验证凭证

响应结果Response

Response表示来自服务器的HTTP响应。Response会作为promise回调函数的参数。 包含以下属性：

status (number) - HTTP状态码，范围在100–599之内

statusText (String) - 响应文本，如："Unauthorized"

ok (boolean) - status为2xx时表示响应成功，值为true

headers (Headers)

url (String)

此外，response还提供了一些方法处理成特定的数据格式并返回一个Promise:

text() - 以字符串形式生成响应文本

json() - 生成JSON.parse(responseText)的结果

blob() - 生成一个Blob

arrayBuffer() - 生成一个ArrayBuffer

formData() - 生成可转发到另一个请求的表单数据

示例：

response.blob().then(function(myBlob) {

// do something with myBlob

});

错误处理

如果出现网络错误或其他原因导致HTTP请求无法完成，fetch()的promise 将会reject该error。

注意，在HTTP 4xx或5xx服务器响应的情况下，promise不会reject。这个promise将像HTTP 2xx一样正常resolve。可以通过检查response.status的状态码来决定如何处理错误：

fetch(...).then(function(response) {

if (response.ok) {

return response

} else {

var error = new Error(response.statusText)

error.response = response

throw error

}

})

兼容情况

截至目前，fetch的浏览器兼容情况如下图所示：

(可以在can I use这个网站查询浏览器兼容性)

如果想要兼容IE及老版本浏览器，可以使用polyfill：whatwg-fetch

Renerence

1.https://github.github.io/fetch/

2.http://louiszhai.github.io/2016/11/02/fetch/

3.https://juejin.im/entry/574512b7c26a38006c43567c

4.https://davidwalsh.name/fetch