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

祝早日戰勝病毒，中國加油，武漢加油，逆戰班加油！