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可以省略不用去写!
祝早日战胜病毒,中国加油,武汉加油,逆战班加油!
Vue的fetch的概述和使用的更多相关文章
- VUE【一、概述】
早上写的忘了保存..还有很多唠叨的内容...哎又得重新写一遍..想吐槽那个自动保存有卵用.. 今天周一,早上起来继续 由于周六加了一整天班,导致周日无心学习,一天都在玩游戏看电影,到了晚上反而更加空虚 ...
- vue 信使 ------fetch、axios
fetch 1.什么是fetch 相当于promise 必须写两个then 第一个then返回状态码 返回成json格式 第二个then返回json数据 2.使用方法 $ npm install fe ...
- 八 Vue学习 fetch请求
1:import {login, getAdminInfo} from '@/api/getData'(从api/getData.js中import login函数.) 看一下如下的getData.j ...
- vue中fetch请求
1. 请求方式:get 请求参数:menuName 返回的结果:data created(){ this._initPageData() }, methods:{ _initPageData(){ f ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- vue中的axios封装
import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000;axios ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- Vue插件写、用详解(附demo)
出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
随机推荐
- Gene family|
6.1引言 随着测序技术的提高,能被测序的物种趋近于复杂(因为越高等的生物基因组大且复杂(1.本身基因结构复杂2.复杂程度与种属关系并不相关)),所以基因家族(Gene family)的数目可能能够更 ...
- 用hash存数组|得地址|取地址
#!/usr/bin/perl -w use strict; my %hash = %{&collect};my $arr_ad=$hash{'a'};print "$arr_ad\ ...
- window下如何通过ssh从服务端copy数据文件
通过cygwin在WINDOWS系统上安装SSH服务 并使用scp命令进行上传和下载文件.按照步骤参考如下 https://jingyan.baidu.com/article/08b6a591a504 ...
- NOIP 2004 T3 合唱队形(DP、最长上升/下降子序列)
链接:https://ac.nowcoder.com/acm/contest/1082/C来源:牛客网 题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队 ...
- 51)PHP,一个数据库操作类的代码
<?php //类名,也习惯上(推荐)使用跟文件名相似的名字 //定义一个mysql连接类,该类可以连接mysql数据库 //并实现其单例模式 //该类的功能还能够完成如下基本mysql操作: ...
- jsonConfig用法
1.先编写jsonConfig的初始化代码 private JsonConfig jsonConfig; public action构造方法() { jsonConfig = new JsonConf ...
- VisualStudioAddIn2017.vsix的下载安装和使用
本加载项是用于Visual Studio的,下载以后按照如下步骤进行安装: 完全退出Visual Studio 把下载了的文件解压缩,会产生一个VisualStudioAddIn2017.vsix文件 ...
- [LC] 76. Minimum Window Substring
Given a string S and a string T, find the minimum window in S which will contain all the characters ...
- idea,2018版破解方法
1.准备安装文件 2.安装 ideaIU-2018.3.5.exe ,如这里是安装到IDEA这个文件夹: 3.复制JetbrainsIdesCrack-4.2-releasexxx.jar放到IDEA ...
- linux下使用过的命令总结(未整理完)
1.常用命令不需解释 ls\cd\cp\mv\pwd\file\vi\vim\cat 2.getconf LONG_BIT 终端返回32表示操作系统32位,返回64表示操作系统64位. 3.ifcon ...