全面分析前端的网络请求方式

Request对象

Request对象接收的两个参数即fetch函数接收的两个参数，第一个参数可以直接传递url，也可以传递一个构造好的request对象。第二个参数即控制不同配置的option对象。

可以传入credentials、headers、method、mode、signal、referrer等属性。

这里注意：

• 传入的headers被当作Headers构造函数的参数来构造header对象。

cookie处理

fetch函数中还有如下的代码：

if (request.credentials === 'include') {  
    xhr.withCredentials = true  
  } else if (request.credentials === 'omit') {  
    xhr.withCredentials = false  
  }  

默认的credentials类型为same-origin,即可携带同源请求的coodkie。

然后我发现这里polyfill的实现和MDN-使用Fetch以及很多资料是不一致的：

mdn: 默认情况下，fetch 不会从服务端发送或接收任何 cookies

于是我分别实验了下使用polyfill和使用原生fetch携带cookie的情况，发现在不设置credentials的情况下居然都是默认携带同源cookie的，这和文档的说明说不一致的，查阅了许多资料后都是说fetch默认不会携带cookie，下面是使用原生fetch在浏览器进行请求的情况：

然后我发现在MDN-Fetch-Request已经指出新版浏览器credentials默认值已更改为same-origin，旧版依然是omit。

确实MDN-使用Fetch这里的文档更新的有些不及时，误人子弟了...

Response对象

Response对象是fetch调用成功后的返回值：

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!