vue axios 如何模仿fetch请求 vue中fetch

Fetch基本概念

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

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

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

Fetch的用法

1 <div id=”box”>
 2       //当点击按钮的时候，控制台可以打印出URL里面的数据
 3      <button @click=”handleClick()”>click</button>
 4 </div>
 5 <script>
 6      New Vue({
 7         el:”#box”,
 8         data:{
 9    
10 },
11 methods:{
12      handleClick(){
13      //fetch方法
14      //Promise对象
15       //第一个.then拿到的是请求头的相关信息
16       //url里面传一个json地址
17       fetch(“url”).then(res=>{   
18        console.log(res)  //拿到的是一个状态码
19         //用json格式读出来，也可以改为text，得到的就是一个text字符串，但是要做一个json解析，所以极少用text格式
20        return res.json()  
21 //第二个.then拿到的是从后端请求回来的真正的数据
22 }).then(res=>{
23    console.log(res)
24 }).catch(err=>{
25    console.log(err)
26 })
27 }
28 },
29 })
30 </script>

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