fetch请求_fetch衣服官网

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

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衣服官网

 

 

注意:

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

 fetch请求_fetch衣服官网

 

 

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

一共有几种数据格式?

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

常用就是json()和text()

看一下使用json获取

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

fetch请求_fetch衣服官网

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

fetch请求_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请求_fetch衣服官网

 

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

 

今天的文章fetch请求_fetch衣服官网分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/51962.html

(0)
编程小号编程小号
上一篇 2023-08-31 20:46
下一篇 2023-08-31 21:11

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注