JavaScript fetch接口

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)
  })
    原文作者:酷酷的波
    原文地址: https://segmentfault.com/a/1190000016196262
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞