1:import {login, getAdminInfo} from '@/api/getData'(从api/getData.js中import login函数。)
  看一下如下的getData.js文件,其中export了login函数,所以其他地方可以调用。
import fetch from '@/config/fetch'

export const login = data => fetch('/admin/login', data, 'POST');

   继续看fetch.js函数:

import { baseUrl } from './env'

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
type = type.toUpperCase();
url = baseUrl + url; if (type == 'GET') {
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
}) if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
} if (window.fetch && method == 'fetch') {
let requestConfig = {
credentials: 'include',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors",
cache: "force-cache"
} if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
} try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
} else { // 如果浏览器不支持fetch
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
} let sendData = '';
if (type == 'POST') {
sendData = JSON.stringify(data);
} requestObj.open(type, url, true);
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData); requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
resolve(obj)
} else {
reject(requestObj)
}
}
}
})
}
}

fetch:  传统 Ajax 指的是 XMLHttpRequest(XHR),现在已被 Fetch替代; Fetch API 是基于 Promise 设计,有必要先学习一下 Promise

XMLHttpRequest:是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX中被大量使用;可以取回所有类型的数据资源,并不局限于 XML。而且除了 HTTP ,它还支持 file 和 ftp 协议。

ActiveXObject:  与XMLHttpRequest差异很小,这两者是在不同浏览器上使用的。

IE里面:
new ActiveXObject("Msxml2.XMLHTTP")
new ActiveXObject("Microsoft.XMLHTTP")
Mozilla和Safari里面:
new XMLHttpRequest() Fetch VS XHR(XMLHttpRequest):

XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:

使用 XHR 发送一个 json 请求一般是这样:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json'; xhr.onload = function() {
console.log(xhr.response);
}; xhr.onerror = function() {
console.log("Oops, error");
}; xhr.send();

使用 Fetch 后,顿时看起来好一点

fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});

使用 ES6 的 箭头函数 后:

fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:

注:async/await 是非常新的 API,属于 ES7,目前尚在 Stage 1(提议) 阶段,这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
// 注:这段代码如果想运行,外面需要包一个 async function

duang~~ 的一声,使用 await 后,写异步代码就像写同步代码一样爽await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。

Promise,generator/yield,await/async 都是现在和未来 JS 解决异步的标准做法,可以完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。

另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch

注:同构(isomorphic/universal)就是使前后端运行同一套代码的意思,后端一般是指 NodeJS 环境。

总结一下,Fetch 优点主要有:

  1. 语法简洁,更加语义化

  2. 基于标准 Promise 实现,支持 async/await

  3. 同构方便,使用 isomorphic-fetch

上面的代码的逻辑是:如果浏览器支持Fetch,就用fetch; 否则就用XHR


Let VS Var:
  • let : 变量只能声明一次
  • var : 变量可以多次声明
let是ES6的新运算
let的好处是当我们写代码比较多的时候可以避免在不知道的情况下重复声明变量
 

八 Vue学习 fetch请求的更多相关文章

  1. vue中fetch请求

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

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  6. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  7. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  8. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  9. DICOM医学图像处理:storescp.exe与storescu.exe源码剖析,学习C-STORE请求

    转载:http://blog.csdn.net/zssureqh/article/details/39213817 背景: 上一篇专栏博文中针对PACS终端(或设备终端,如CT设备)与RIS系统之间w ...

随机推荐

  1. iOS 使用 Core Plot 绘制统计图表入门

     本文转载至 http://blog.csdn.net/zhibudefeng/article/details/7677457   iOS(iPhone/iPad) 下图形组件有两个有名的,s7gra ...

  2. EasyDSS流媒体视频实时回传与录像管理解决方案

    一.背景 1.1 方案背景 随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种技术的大规模商用,视频在各行各业越来越受到重视,无论是传统的视频媒体转向 ...

  3. RTSP Windows专用播放器EasyPlayer : 稳定、兼容、高效、超低延时

    EasyPlayer RTSP Windows专用播放器 EasyPlayer RTSP Windows 播放器是由EasyDarwin团队开发和维护的一个完善的RTSP流媒体播放器项目,视频编码支持 ...

  4. 我们计划为EasyDSS定制开发一款超低延时的EasyPlayer Flash播放器

    现象 最近团队在做EasyDSS RTMP流媒体服务器开发的过程中,遇到了一个关于延时累积的问题,先大概描述一下过程: 在EasyRTMP Android进行长时间的RTMP推流压力测试,在EasyD ...

  5. 记录日志(Log4Net)

    一:Log4net的简单示例 1.新建控制台应用程序,右键属性,把其框架.NET Framework4 Client Profile 修改为.NET Framework4,此时项目中将会自动添加一个A ...

  6. 【题解】[CJOI2019Chebnear]

    [题解][CJOI2019Chebnear] 题目描述 给定平面上有\(n\)个仇人,\((x,y) ,x,y \in R^+\) ,\(n\)个人都是仇人关系,而有仇人关系的一对人的切比雪夫距离若\ ...

  7. svn 出现冲突时可以使用 meld . 命令合并。 而git的冲突合并详见内容

    1.可以在任意目录使用 git mergetool --tool-help    查看 git 所支持的merge tools. 2.可以使用如下配置去设置merge tool 和 diff tool ...

  8. IOS UIlabel 、UIButton添加下划线

    1.给UILabel 添加下划线 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(, , , )]; label.backgrou ...

  9. oracle 数据库运维知识

    1.在数据库中连接用某个用户连接数据库报错: Product: DbVisualizer Pro 9.1.1 Build: #2063 (2013/10/01 12:27) Java VM: Java ...

  10. ubuntu下安装redis以及redis客户端在mac下的使用

    ubuntu下安装redis http://blog.fens.me/linux-redis-install/ 此方式利用brew安装包去获取最新的rdm客户端 资源失效了 https://www.j ...