Fetch API 入门使用

html5 引入了新的网络请求接口Fetch API,原生支持Promise,可配合 async/await 语法使用。

Fetch 实例

使用 fetch 用户数据列表。

fetch('/users')
.then(res=>res.json())//服务器返回的是json
.then(user=>{console.log(user);})
.catch(error=>{console.log(error);})
复制代码

async/await 语法

async function getUsers() {
  try {
    let res = await fetch('/users');
    let users = await res.json();
    console.log(users)
  } catch (error) {
   console.log(error)
  }
}
复制代码

fetch 返回的不是真正需要的数据,而是一个 Promise,所有还需要使用它提供的方法进一步获取想要的数据。

具体用法

两种调用方式:

fetch(url,options)
fetch(req,options)
复制代码

推荐使用第一种,一眼就可以看到url,更加直观。

options 是一个对象,可设置以下字段:

  • method:请求方法,默认GET;
  • headers:请头信息,可以是简单的对象,也可以是 Headers 的实例;
  • body:发送数据。BlodbufferSourceFormDataURLSearchParamsUSVstring,GET、HEAD 没有body;
  • mode:请求模式。
    • cors:跨域请求;
    • no-cors:只允许使用GETHEADPOST;
    • same-origin:同源请求;
    • navigate:支持页面导航(不太明白)。
  • credentials:是否发送 cookies
    • omit:不发送,默认;
    • same-origin:同源发送;
    • include:发送。
  • cache:缓存策略:
    • default:请求之前检查缓存;
    • no-cache:有缓存,发送一个查询请求,缓存失效,再发送正常请求;
    • no-store:不检查缓存,直接请求;
    • reload:忽略缓存,拿到响应后,更新缓存;
    • force-cache:强制读取缓存,缓存过期,再发送正常请求;
    • only-if-cached:读取缓存,过期就报网络错误。 mode 设置为 same-origin 时有效。
  • redirect:重定向时的处理方法:
    • follow:跟随;
    • error:报错;
    • manual:用户手动跟随。
  • integrity:包含一个验证资源完整性的字符串。

Headers

Headers 用于构造请求头信息,构造函数接收一个对象,对象的key-value就是请求头的信息。

let headers = new Headers(
  {
    'content-type':'text/plain',
    'content-length':data.toString().length
  }
);
headers.append('X-Custom-header','AnotherValue');//追加
headers.has('content-type');//true 查询
headers.get('content-type');//'text/plain' 获取
// headers.getAll('content-type');//['text/plain'] getAll 被移除了
headers.delete('content-type');//删除
headers.set('content-type','json');//重写
复制代码

Request

请求对象。可以新建一个,也可以从已有的对象中继承。

let Url = '/users';
let req = new Request(Url,{method:'GET',headers})
// 扩展 request
let postReq= new Requset(req,{method:'POST'})
复制代码

Response

Response 实例是 fertch 处理完 promise 之后的返回的。也可以手动创建,在servoceWorkers 中才真实有用。

let res = new Response(body,init)
复制代码

body 可以是BolbBufferSourceFormDataURLSearchParamsUSVString 这些值。

init 是一个对象,可包含以下字段:

  • status:响应状态码;
  • statusText:状态文本;
  • headers:头部信息,普通对象或Headers 的实例。

response 的实例还有一些可读属性:

  • ok:请求是否成功,状态码为 2xx 都为 true
  • status:状态码;
  • statusText:状态文本;
  • bodyUesed:响应数据是否被用过;
  • headers:头部信息;
  • url:响应地址;
  • type:响应类型:
    • basic:同源;
    • cors:跨域;
    • error:出错;
    • opaque:Request mode 设置为 no-cors 的响应。

response 有一些方法来 reslove 响应信息。

  • json,解析响应信息为对象,resolve promise;
  • text,…………字符串…………;
  • bolb,转化响应Bold,resolve;
  • formData,………………;
  • arrayBuffer,…………。

Fetch Vs AJAX

  • 响应状态为404或5xx,都resolve,但是 ok 为false。只有当网络故障或者请求被阻止了,才会 reject
  • 默认情况不发送不接收cookies,需要设置;
  • POST 的数据需要转为JSON;
  • 不能设置超时和取消请求,可以通过Promise.race,了模拟两者;
  • 文件上传和下载获取不到进度,可使用 response.body 是可读流,具有getReader,可根据这个来获取下载进度。;
  • 不能直接获取到响应数据,需要调用响应方法,resolve 一下;

总结

  • Fetch API 很底层,使用起来并不丝滑;
  • Fetch 错误处理有点复杂;
  • Fetch 不支持取消和超时设置;
  • 上传和下载进度没有,使用可读流来获取,复杂性突然升高了。

还是使用原生的 xhr 和 axios 库来的爽快。

参考

转载于:https://juejin.im/post/5d05d4a75188253a127c0707

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值