前端培训-中级阶段(28)- fetch 请求(2019-12-05期)

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

前言

fetch 用于获取资源(包括跨域请求),其实和 XMLHttpRequest 差不多。那么为什么 AJAX 的解决方案已经有了,我们还要搞出一个新的API?

其实这是符合规则的。不是说 XMLHttpRequest 不好。而是科技发展就是这样,过个几年就要来点颠覆性的更新。

XMLHttpRequest 后面都叫 XHR 吧。

fetch 特点

  1. 默认不带 Cookie,这是一大槽点,我才接触的时候就经常吐槽(但是现在已经改了)。

    自从2017年8月25日后,默认的 credentials 政策变更为 same-originFirefox 也在 61.0b13 中改变默认值
    使用 Fetch - mdn
  2. 请求不能中途终止(XHRabort()

    浏览器已经开始为 AbortControllerAbortSignal 接口(也就是Abort API)添加实验性支持,允许像 Fetch 和 XHR 这样的操作在还未完成时被中止
    Fetch API - mdn
  3. Promise,写起来的确是比回调舒服
  4. 上传进度、下载进度(当做流,然后处理也能模拟)

fetch 语法

fetch(input [, init]);

input 入参

  1. 字符串类型、一个可以访问的URL地址。
  2. Request 对象。在 sw 中 fetch 事件捕获到的就是 Request 对象。

init 入参

这是一个对象。

  1. method 请求方式

    1. 字符串类型 getpostput
  2. headers 请求头

    1. Headers 对象
    2. 对象形式 image.png
  3. body 消息体,支持的和 XHR 一样。get 需要自己拼接在URL上

    1. Blob、File 比如input选择的文件
    2. Buffer
    3. FormData 表单上传 content-type: multipart/form-data
    4. URLSearchParams content-type: application/x-www-form-urlencoded
    5. String
  4. mode

    1. 字符串类型

      1. cors 跨域请求
      2. no-cors 正常的网络请求(默认)
      3. same-origin 只请求同域
  5. credentials cookie携带的方式

    1. 字符串类型

      1. omit 不携带 cookie (早期默认值,后来改了)
      2. same-origin 同域请求携带 cookie (默认值)
      3. include 一直携带 cookie。不考虑同域跨域
  6. cache 缓存模式

    1. 字符串类型 defaultno-storereloadno-cacheforce-cacheonly-if-cached
  7. redirect 重定向处理方式

    1. 字符串类型

      1. follow 自动处理,跟随跳转(早期默认值,后来改了)
      2. manual 阻止、(默认值)
      3. error 禁止处理
  8. referrer 请求来源

    1. 字符串类型 url地址,不可跨域。可以是相对路径

      1. client 标识客户端自己处理。默认
      2. no-referrer 不传递
  9. referrerPolicy

    1. 字符串类型 no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url
  10. integrity 校验

fetch 使用实战

get请求

fetch(`https://www.lilnong.top/cors/get?ref=SF`)
    .then(v=>v.json())
    .then(v=>console.log(v))

post请求

因为get的不涉及到 content-type 所以还相对的简单一些。下面我们来针对不同的 content-type 写一下

application/json

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        headers: {'content-type':'application/json'},
        body:JSON.stringify({bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

multipart/form-data

fm = new FormData();
fm.append('type','formdata')
fm.append('bodyRef','SF')
fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:fm
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

application/x-www-form-urlencoded

fetch(`https://www.lilnong.top/cors/post?ref=SF`,{
        method:'post',
        body:new URLSearchParams({type: 'URLSearchParams',bodyRef:'SF'})
    })
    .then(v=>v.json())
    .then(v=>console.log(v))

post 上传文件

上传文件只能使用multipart/form-data。所以我们就是用FormData 对象。有时候我们需要给文件添加 filename

append 方案

fm.append(name,value,filename) value里面放 Blob 对象或者File 都可以。这里可以传入 filename

File 方案

File 对象自带 filename, new File(fileBits, fileName, options) 可以把 Blob 初始化成 File 对象。

ajax 获取图片并渲染

fetch(`//cors-www.lilnong.top/static/img/wx-linong.jpg`)
    .then(v=>v.blob())
    .then(v=>console.log(v,URL.createObjectURL(v)))

fetch 下载进度条展示

文章地址
测试地址-fetch显示进度条并下载
clipboard.png

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
阅读 1.5k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

22.7k 声望
4.8k 粉丝
0 条评论

Read-Search-Ask

22.7k 声望
4.8k 粉丝
文章目录
宣传栏