fetch跨域问题的使用详解

 更新时间:2022年09月15日 10:01:40   作者:喆星高照  
这篇文章主要介绍了fetch跨域问题的使用详解,fetch 的核心主要包括:Request , Response , Header , Body,利用了请求的异步特性 --- 它是基于 promise 的,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

一、介绍

fetch 提供了一个获取资源的接口 (包括跨域)。

fetch 的核心主要包括:Request , Response , Header , Body

利用了请求的异步特性 --- 它是基于 promise 的

1.作用:fetch这个API, 是专门用来发起Ajax请求的;

fetch('/url').then(data=>{
    return data.text();
}).then(ret=>{
    //注意,这里才是得到的最终数据
    console.log(ret);
});

2.fetch是由原生JS提供的API,专门用来取代XHR这个对象的;

 fetch("请求的url地址")
  .then(response => res.json() )
  .then(data => console.log(data))
  //注意: 第一个.then 中获取到的不是最终数据,而是一个中间的数据流对象;
  // 注意: 第一个  .then 中获取到的数据, 是一个 Response 类型对象;
  // 注意: 第二个 .then 中,获取到的才是真正的 数据;

3.发起Get 请求

// 默认  fetch("url") 的话, 发起的是 Get 请求
 fetch("url")
 .then(response => {
     //这个 response  就是 服务器返回的可读数据流, 内部存储的是二进制数据
     // .json() 的作用,就是 读取 response 这个二进制数据流,并把 读取到的数
     //  据,转为 JSON 格式的Promise 对象
     return response.json()
  })
  .then(data => {
           //这离  第二个 .then 中拿到的 data, 就是最终的数据
     console.log(data)
  })

4.发起Post请求

var sendDate = new URLSearchParams()
 sendDate.append("name",'ls')
 sendDate.append("age", 30)

 fetch("url", {
   method: "post",
   body: sendDate  //要发给服务器的数据
 })
 .then(response => response.json())
 .then(data => console.log(data))
fetch(URL, {
            method: 'post',
            body:JSON.stringify(obj),
            headers:{
                'Content-Type': 'application/json'
            }
        })
        .then(function (response) {
            return response.text();
        })
        .then(function (myJson) {
            alert(myJson);
        });

到此这篇关于fetch跨域问题的使用详解的文章就介绍到这了,更多相关fetch跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何实现浏览器上的右键菜单

    如何实现浏览器上的右键菜单

    如何实现浏览器上的右键菜单...
    2006-07-07
  • js+vml创建3D页面效果代码

    js+vml创建3D页面效果代码

    js vml制作的3D效果
    2008-02-02
  • Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条,进一步向大家讲解了导航条养殖,以及导航条中元素的使用方法,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js操作textarea 常用方法总结

    js操作textarea 常用方法总结

    在DOM里面操作textarea里面的字符,是比较麻烦的,本文将介绍一种比较简单的方法,需要的朋友可以参考下
    2012-12-12
  • uniapp实现附近商家定位的示例代码

    uniapp实现附近商家定位的示例代码

    本文主要介绍了uniapp实现附近商家定位的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 使用JS解析excel文件的完整实现步骤

    使用JS解析excel文件的完整实现步骤

    解析excel文件是我们日常开发中经常遇到的一个需求,下面这篇文章主要给大家介绍了关于使用JS解析excel文件的完整实现步骤,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 如何用js获得当前视频播放的状态

    如何用js获得当前视频播放的状态

    这篇文章主要给大家介绍了关于如何用js获得当前视频播放状态的相关资料,大家在日常应用场景中可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,需要的朋友可以参考下
    2023-07-07
  • JS定时器实例

    JS定时器实例

    在javascritp中,有两个关于定时器的专用函数
    2013-04-04
  • JS实现百度搜索框

    JS实现百度搜索框

    这篇文章主要为大家详细介绍了JS实现百度搜索框,实时返回搜索建议项,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 刷新页面的几种方法小结(JS,ASP.NET)

    刷新页面的几种方法小结(JS,ASP.NET)

    本篇文章只要是对刷新页面的几种方法进行了详细的总结介绍,包括JS与ASP.NET。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论