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可以省略不用去写！

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