码迷,mamicode.com
首页 > 其他好文 > 详细

Fetch

时间:2018-12-29 19:38:22      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:files   详解   pre   文件   文字   浏览器   ber   html   分享图片   

详解Fetch API

兼容性

注意:由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill es6-promise

  1. Fetch使用说明
fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

说明:
a. fetch api返回的是一个promise对象
b.Options:

  • method(String): HTTP请求方法,默认为GET
  • body(String): HTTP的请求参数
  • headers(Object): HTTP的请求头,默认为{}
  • credentials(String): 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie

c.第一个then函数里面处理的是response的格式,这里的response具体如下:

 

 
技术分享图片
image.png
  • status(number): HTTP返回的状态码,范围在100-599之间
  • statusText(String): 服务器返回的状态文字描述,例如Unauthorized,上图中返回的是Ok
  • ok(Boolean): 如果状态码是以2开头的,则为true
  • headers: HTTP请求返回头
  • body: 返回体,这里有处理返回体的一些方法
    • text(): 将返回体处理成字符串类型
    • json(): 返回结果和 JSON.parse(responseText)一样
    • blob(): 返回一个Blob,Blob对象是一个不可更改的类文件的二进制数据
    • arrayBuffer()
    • formData()
  1. Fetch常见坑
  • 兼容性
 
技术分享图片
image.png

如caniuse所示,IE浏览器完全不支持fetch,移动端的很多浏览器也不支持,所以,如果要在这些浏览器上使用Fetch,就必须使用fetch polyfill

  • cookie传递
    必须在header参数里面加上credentials: ‘include‘,才会如xhr一样将当前cookies带到请求中去
  • fetch和xhr的不同
    fetch虽然底层,但是还是缺少一些常用xhr有的方法,比如能够取消请求(abort)方法
    fetch在服务器返回4xx、5xx时是不会抛出错误的,这里需要手动通过,通过response中的ok字段和status字段来判断
    1. 实践总结
      我们在实际应用中虽然会因为它没有interceptor等原因还需要再封装一层,但fetch api仍然不失为一个非常赞的API。。。。        搬运https://www.cnblogs.com/ggmh/p/10054213.html

Fetch

标签:files   详解   pre   文件   文字   浏览器   ber   html   分享图片   

原文地址:https://www.cnblogs.com/kazama/p/10197583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!