Fetch是什么以及对他的理解

Fetch API是基于Promise实现的获取远端数据的方式,可以这么理解Fetch 就是XMLHttpRequest的升级版。

fetch(url)
.then(function(res){
  
})
.then(function(data){
  
})

典型用法:

fetch('http://192.168.101.100')
.then(function(res){
    // res.text()和res.json() 返回值都是个Promise对象,我们一般将其值返回,在下一个then中接受数据
    // 获取响应的信息,转成文本格式的Promise对象
    return res.text();
    // 获取响应的信息,转成json格式的Promise对象
    // return res.json();
})
.then(function(data){
  	console.log(data);
})

其实fetch(),可以有第二个参数,传入一些其它配置项,参数类型为对象:

fetch(url, options)

第二个参数:options对象,包括:

  • method: 请求使用的方法,如 GETPOST
  • headers: 请求的头信息,形式为 Headers 的对象或包含 ByteString 值的对象字面量。
  • body: 请求的 body 信息:可能是一个 BlobBufferSourceFormDataURLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
  • credentials: 请求的 credentials,如 omitsame-origin 或者 include。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 Chrome 50 开始, 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
  • cache: 请求的 cache 模式: defaultno-store 、 reload 、 no-cache 、 force-cache或者 only-if-cached 。
  • redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中,Chrome 47之前的默认值是 follow,从 Chrome 47开始是 manual。
  • referrer: 一个 USVString ,可以是 no-referrerclient或一个URL。默认是 client
  • referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
  • integrity: 包括请求的 subresource integrity 值 ( 例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

上面诸多options中,其实常用的就是methodheadersbody以及mode等。

// get请求
fetch('/test2?name=哈哈')
// 默认是GET请求,直接使用querystring方式传参
.then(res =>{
  return res.text();
})
.then(data=>{
  console.log(data);
})
// delete请求
fetch('/test2', {
  // 发送delete请求
  method: 'DELETE'
})
  .then(res =>{
  return res.text();
})
  .then(data=>{
  console.log(data);
})
// POST 请求
// POST 请求传参的方式比较多 这里只是其中一种
fetch('/test', {
  method: 'POST',
  // 传递的数据主体
  body: 'name=哈哈&age=18',
  headers: {
    // 必须传
    'content-type': 'application/x-www-form-urlencoded'
  }
})
  .then(res =>{
  return res.json();
})
  .then(data=>{
  console.log(data);
})
// put请求  传参方式一样,不过一般put方式用在restful风格的接口上,一般url地址会比较特殊
fetch('/test', {
  method: 'PUT',
  body: 'name=哈哈&age=18',
  headers: {
    // 必须传
    'content-type': 'application/x-www-form-urlencoded'
  }
})
  .then(res =>{
  return res.json();
})
  .then(data=>{
  console.log(data);
})
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读