fetch请求_IT分享知识网

大家好，欢迎来到IT知识分享网。

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers (en-US)。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch() 可以不会接受跨域 cookies；你也可以不能使用 fetch() 建立起跨域会话。~~其他网站的 Set-Cookie 头部字段将会被无视。~~
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        async function readFile(){
        const data = await fetch("./text.txt").then(e=>e.text());
        console.log(data);
      }
      readFile()
       </script>
      
</body>
</html>

fetch请求

注意：

fetch一般都是用在浏览器端的，少用在node端
服务器端使用，本地运行会报错

fetch请求

此时我们看上面代码，fetch返回的是一个promise对象，就可以通过.then来进行获取操作，内部的e.text()指的获取text文本

一共有几种数据格式？

arrayBuffer()
blob()
json()
text()
formData()

常用就是json()和text()

看一下使用json获取

此时我们新建一个1.json文件，获取a的值

fetch请求

 <script>
        async function readFile(){
          const {a} = await fetch("./1.json").then(data=>data.json());
          console.log(a);
        }
        readFile()
      </script>

fetch请求

总结：fetch返回的是promise对象，一般是在浏览器端使用，发送请求，支持多种请求，有不同的方法获取body返回值，大多数用的是text和json方法

fetch的优缺点

为什么要用fetch，原生的XMLHttpRequest是一个很笨重的实现，没有整体的封装性，配置和调用方式很混乱

我们看一下下面的代码

<script>
        var xhr = new XMLHttpRequest();
        xhr.open("GET","http://www.baidu.com")

        xhr.onload = function(){
          console.log(xhr.response);
        }
        xhr.send()
      </script>

fetch是JavaScript的语言封装，是对XMLHttpRequest封装，不是第三方库的封装，不同于jquery的ajax

fetch也有自己的规定，兼容性不好，大多数使用在浏览器端，如果想要在node中使用，只用原生的api是不支持，得引用第三方插件node-fetch

fetch和jquery的区别

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch() 可以接受跨域 cookies；也可以使用 fetch() 建立起跨域会话。
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

fetch的请求

fetch默认的请求是get请求，如果发送post请求，需要配置body信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>按我发送请求</button>
  <script src="./jquery.min.js"></script>
  <script>
    $("button").click(function(){
      fetch("fetch_methods",{
        // 请求方式
        method: "post",
        // 请求头部信息
        headers:{
          "content-type":'application/json'
        },
        // 携带参数
        body: "name=小明&age=12"
      }).then(data=>{data})
      .catch(err=>{
        console.log("错误信息",err);
      })
    })
  </script>
</body>
</html>

fetch请求

如果是post请求，此时需要第二个参数为对象，method表示请求方式，header是请求头部信息，body是上行请求携带的参数

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30433.html

fetch请求

fetch的优缺点

fetch和jquery的区别

fetch的请求

相关推荐

发表回复