Fetch基本概念

(前端小白,刚学习vue,写的不好或是不对,请各位大佬多多指正!感激不尽!)

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

Fetch 的核心在于对 HTTP 接口的抽象,包括 RequestResponseHeadersBody,以及用于初始化异步请求的 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可以省略不用去写!

祝早日战胜病毒,中国加油,武汉加油,逆战班加油!

Vue的fetch的概述和使用的更多相关文章

  1. VUE【一、概述】

    早上写的忘了保存..还有很多唠叨的内容...哎又得重新写一遍..想吐槽那个自动保存有卵用.. 今天周一,早上起来继续 由于周六加了一整天班,导致周日无心学习,一天都在玩游戏看电影,到了晚上反而更加空虚 ...

  2. vue 信使 ------fetch、axios

    fetch 1.什么是fetch 相当于promise 必须写两个then 第一个then返回状态码 返回成json格式 第二个then返回json数据 2.使用方法 $ npm install fe ...

  3. 八 Vue学习 fetch请求

    1:import {login, getAdminInfo} from '@/api/getData'(从api/getData.js中import login函数.) 看一下如下的getData.j ...

  4. vue中fetch请求

    1. 请求方式:get 请求参数:menuName 返回的结果:data created(){ this._initPageData() }, methods:{ _initPageData(){ f ...

  5. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  6. vue中的axios封装

    import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios ...

  7. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  8. Vue插件写、用详解(附demo)

    出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...

  9. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

随机推荐

  1. ansible批量部署(一)

    自动化运维工具shell脚本/Ansible(无客户端)/Saltstack(master-minion) 回顾服务器部署的流程:买云主机->环境部署->软件部署->配置部署-> ...

  2. Caffe Ubuntu14.04 + CUDA 8 (支持GTX1080 1070等Pascal架构显卡)

    1. 前言 本教程使用的系统是Ubuntu 14.04 LTS 64-bit,使用的CUDA版本为8. 理论上本教程支持Pascal架构显卡,如游戏卡GeForce GTX1070,GTX 1080, ...

  3. Educational Codeforces Round 68 差G

    Educational Codeforces Round 68 E 题意:有 n 个线段,每个都是平行 x 或者 y 轴,只有互相垂直的两线段才会相交.问形成了多少个矩形. \(n \le 5000, ...

  4. [TJOI2017]不勤劳的图书管理员(分块+树状数组)

    有一个数组开大会MLE开小会RE的做法:就是树套树,即树状数组套主席树,这种方法比较暴力,然而很遗憾它不能通过,因为其时空复杂度均为O(nlog2n). 想到一种不怎么耗内存,以时间换空间,分块!单次 ...

  5. 能够伪装为 win 10 的 kali 体验与中文设置

    前言 作为习惯性捣鼓各类操作系统,时长也会使用 Kali 系统,之前看到有新的版本发行 传闻这个版本和之前的版本在系统界面和壁纸上都做了更新,还能一键设置 win 10 的系统界面 对此决定下载体验一 ...

  6. Metasploit详解

    title date tags layout Metasploit 详解 2018-09-25 Metasploit post 一.名词解释 exploit 测试者利用它来攻击一个系统,程序,或服务, ...

  7. 牛客-Forsaken的数列(Treap)

    题目传送门 sol:第一次看题还真信了是用线段树来做,但是没什么想法,看了题解发现是我不会的Treap,然后花了几天时间学习了一下并补掉题目 无旋Treap #include <bits/std ...

  8. php获取mysql大小

      查看指定数据库大小:  SELECT sum(DATA_LENGTH)+sum(INDEX_LENGTH) FROM information_schema.TABLES where    TABL ...

  9. PCA的原理简述

    PCA的实质就是要根据样本向量之间的相关性排序,去掉相关性低的信息,也就是冗余的特征信息. 我们都知道噪声信号与待测量的信号之间实际上是没有相关性的,所以我我们利用这个原理就可以将与待测量无关的噪声信 ...

  10. 63)PHP,登录验证

    首先辨析两种状态:   你的用户名和密码通过验证  只能表明你能登录,但是不能保证你登录了. 管理员信息合法和管理员处于的登录状态是两个概念:管理员信息合法证明你的用户名和密码是正确的, 但是管理员信 ...