JavaScript fetch接口

假如看网上的fetch教程，会起首对照XMLHttpRequest和fetch的好坏，然后引出一堆看了很快会遗忘的内容(本人记性不好)。因而，我写一篇关于fetch的文章，为了本身看着轻易，毕竟工作中用到的也就是一些很基本的点罢了。

fetch，说白了，就是XMLHttpRequest的一种替换计划。假如有人问你，除了Ajax猎取背景数据以外，另有无其他的替换计划？

这是你就能够回复，除了XMLHttpRequest对象来猎取背景的数据以外，还能够运用一种更优的解决计划fetch。

fetch的案例

下面我们来写第一个fetch猎取后端数据的例子：

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
  .then((res)=>{
    return res.text() // res.text()是一个Promise对象
  })
  .then((res)=>{
    console.log(res) // res是终究的效果
  })

GET要求

GET要求开端

完成了helloworld，这个时刻就要来认识一下GET要求怎样处理了。

上面的helloworld中这是运用了第一个参数，实在fetch还能够供应第二个参数，就是用来通报一些初始化的信息。

这里假如要迥殊指明是GET要求，就要写成下面的情势：

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

GET要求的参数通报

GET要求中假如须要通报参数怎么办？这个时刻，只能把参数写在URL上来举行通报了。

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上通报的参数
    method: 'GET'
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

POST要求

与GET要求相似，POST要求的指定也是在fetch的第二个参数中：

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST' // 指定是POST要求
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

POST要求参数的通报

尽人皆知，POST要求的参数，肯定不能放在URL中，如许做的目标是防备信息泄漏。

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是要求对象
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

设置要求的头信息

在POST提交的过程当中，平常是表单提交，但是，经由查询，发明默许的提交体式格局是：Content-Type:text/plain;charset=UTF-8，这个显然是不合理的。下面我们进修一下，指定头信息：

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    headers: new Headers({
      'Content-Type': 'application/x-www-form-urlencoded' // 指定提交体式格局为表单提交
    }),
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

这个时刻，在谷歌浏览器的Network中查询，会发明，要求体式格局已变成了content-type:application/x-www-form-urlencoded。

经由过程接口获得JSON数据

上面一切的例子中都是返回一个文本，那末除了文本，有无其他的数据范例呢？肯定是有的，详细查询地点：Body的范例

因为最经常使用的是JSON数据，那末下面就简朴演示一下猎取JSON数据的体式格局：

fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上通报的参数
    method: 'GET',
    headers: new Headers({
      'Accept': 'application/json' // 经由过程头指定，猎取的数据范例是JSON
    })
  })
  .then((res)=>{
    return res.json() // 返回一个Promise，能够剖析成JSON
  })
  .then((res)=>{
    console.log(res) // 猎取JSON数据
  })

强迫带Cookie

默许情况下, fetch 不会从服务端发送或吸收任何 cookies, 假如站点依赖于保护一个用户会话，则致使未经认证的要求(要发送 cookies，必需发送凭证头).

// 经由过程fetch猎取百度的毛病提醒页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET',
    credentials: 'include' // 强迫到场凭证头
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })