前端 fetch 异步通信的未来，更简洁异步请求 API

前端 fetch 异步通信的未来，更简洁异步请求 API

兼容性： fetch 还属于早期阶段，目前只有部分高版本浏览器实现该接口Chrome43+、Edge14、Firefox40+、Opera29+、Safari10+

先来看一个使用 XMLHttpRequest 发送异步请求例子：

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    if (this.status === 200) {
      // 成功 this.responseText
    } else {
      // 失败 this.responseText
    }
  }
}
xhr.open('GET', '/api/user/list', true)
xhr.onerror = function () {
  // 发生错误
}
xhr.send()

再来看一下 fetch 发送异步请求例子:

// 一个简单的 GET 请求

fetch('/api/user/list').then(response => {
  // response.ok 判断请求是否成功
  response.json().then(data => {
    // 数据
  })
})

// 设置参数、请求头等..
const headers = new Headers()
headers.set('Content-Type', 'text/plain')
fetch('/api/user/list', {method: 'GET', headers: headers}).then(response => {
  // response.ok 判断请求是否成功
  response.json().then(data => {
    // 数据
  })
})

Response 对象部分属性说明

属性	类型	描述
json	Function	得到 json，返回 Promise 对象
test	Function	得到 text，返回 Promise 对象
redirected	Boolean	是否重定向了
body	ReadableStream	数据流
bodyUsed	Boolean	内容是否已被读取
headers	Headers	返回响应头
status	Number	返回状态码
statusText	String	状态
url	String	返回请求路径
ok	Boolean	根据状态判断完成还是失败
redirected	Boolean	是否重定向了
type	String	类型