Vue的fetch的概述和使用

Fetch基本概念

（前端小白，刚学习vue，写的不好或是不对，请各位大佬多多指正！感激不尽！）

Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能。

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

Fetch的用法

<div id=”box”>
      //当点击按钮的时候，控制台可以打印出URL里面的数据
     <button @click=”handleClick()”>click</button>
</div>
<script>
     New Vue({
        el:”#box”,
        data:{
   
},
methods:{
     handleClick(){
     //fetch方法
     //Promise对象
      //第一个.then拿到的是请求头的相关信息
      //url里面传一个json地址
      fetch(“url”).then(res=>{   
       console.log(res)  //拿到的是一个状态码
        //用json格式读出来，也可以改为text，得到的就是一个text字符串，但是要做一个json解析，所以极少用text格式
       return res.json()  
//第二个.then拿到的是从后端请求回来的真正的数据
}).then(res=>{
   console.log(res)
}).catch(err=>{
   console.log(err)
})
}
},
})
</script>

Fetch有很严格的格式，它是一种get请求。res.json调用完返回的是一个json格式的promise对象，把这个promise对象return出去，如果成功的话第二个return就会调用，拿到后端的数据，如果失败的话就会进入catch分支。Catch可以省略不用去写！

祝早日战胜病毒，中国加油，武汉加油，逆战班加油！