前后端交互三（Fetct基本用法——Request 对象，Headers 对象，Response对象，text()，json()；Fetch 与 XMLHttpRequest 的差异）

最新推荐文章于 2024-03-12 19:34:17 发布

Jyann~

最新推荐文章于 2024-03-12 19:34:17 发布

阅读量1k

点赞数

分类专栏：前后端交互前端 JS高级文章标签： Request 对象 Headers 对象 Response对象 text方法 json方法

本文链接：https://blog.csdn.net/qq_34569497/article/details/105864893

版权

前端同时被 3 个专栏收录

173 篇文章 14 订阅

订阅专栏

JS高级

84 篇文章 3 订阅

订阅专栏

前后端交互

7 篇文章 1 订阅

订阅专栏

1.fetch()的基本用法

2.fetch(url,options)的参数解析

2.1第一个参数是请求的url

2.2第二个参数 options对象常用配置

5.Fetch 与 XMLHttpRequest 的差异

1.fetch()的基本用法

fetch("/test").then(res=>{
            return res.json();
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

2.fetch(url,options)的参数解析

2.1第一个参数是请求的url

第一个参数是请求的url

2.2第二个参数 options对象常用配置

第二个参数 options对象常用配置：

method: 请求使用的方法，如 GET、POST。

headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。

body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

same-origin表示必须同源，绝对禁止跨域，这个是老版本浏览器默认的安全策略。
no-cors这个就很特殊了，字面意思是禁止以CORS的形式跨域，其实它的效果是，对外域的请求可以发送，外域服务器无论设不设Access-Control-Allow-Origin: *都会接收请求并处理请求，但是浏览器不接收响应，即使外域返回了内容，浏览器也当做没接到

3.Fetch的Headers对象

你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately")

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});