美文网首页
fetch的使用(需要解决跨域问题)

fetch的使用(需要解决跨域问题)

作者: 白小纯Zzz | 来源:发表于2019-05-28 21:06 被阅读0次

    1.作用:fetch这个API, 是专门用来发起Ajax请求的;
    2.fetch是由原生JS提供的API,专门用来取代XHR这个对象的;

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

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

          本文链接:https://www.haomeiwen.com/subject/gsmjtctx.html