vue.js 三（数据交互）isomorphic-fetch

至于fetch的介绍，在这里就不多说了，官方和网络上的说明不少

之前使用jquery的Ajax朋友，可以尝试一下使用一下这个新的api

推荐使用isomorphic-fetch，兼容Node.js和浏览器两种环境运行。

npm install --save isomorphic-fetch es6-promise

这里我按照官方网站的介绍，具体在vue.js中写了一个范例，只需要拷贝代码到新的文件Index.vue就可以试一试看看了

<template><div class="index"><div v-for="item in items" class="story"><div>{{item.title}}</div><div class="story-author">{{item.author}}</div><div>{{item.date}}</div><div v-html="item.body"></div></div></div>
</template><script>require('es6-promise').polyfill();
require('isomorphic-fetch');export default {name: 'hello',data() {return {msg: 'Welcome to Your Vue.js App',items: []}}, created: function () {let vueThis = this;fetch('http://offline-news-api.herokuapp.com/stories').then(function (response) {if (response.status >= 400) {throw new Error("Bad response from server");}return response.json();}).then(function (stories) {console.log(stories);vueThis.items = stories;});}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.story {border: 1px solid #ccc;padding: 5px;
}.story-author {font-weight: bold;font-size: 18px;font-style: italic;
}
</style>

由于IE对Promise的不支持，所以还需要使用 promise-polyfill

npm install promise-polyfill --save-exact

router/index.js文件添加引用（红色标记的地方）

import Vue from 'vue'
import Router from 'vue-router'
import Promise from 'promise-polyfill'if (!window.Promise) {window.Promise = Promise;
}
const Hello = r => require.ensure([], () => r(require('../pages/Hello')), 'group-b')
const Index = r => require.ensure([], () => r(require('../pages/Index')), 'group-a')Vue.use(Router)export default new Router({routes: [{ path: '/', name: 'Index', component: Index },{ path: '/hello', name: 'Hello', component: Hello }]
})

由于我的浏览器是IE11，修改文档模式的情况下，只有IE9+以上运行正常，IE的其他浏览器有要求的请慎用。

以上只是GET获取数据的范例，其他的修改Header，跨域等一些常见问题，按照fetch对应的用法使用就可以了

这里只是对于初次使用vue.js不知道怎么获取数据做的一个简单的范例。

今天写文章不利，快写完的时候浏览器崩溃，连历史记录都没有留下，只能从简重新写了，就写到这里吧，如有帮助您的地方，推荐一下吧！

转载于:https://www.cnblogs.com/stealth7/p/6952790.html

vue.js 三（数据交互）isomorphic-fetch相关推荐

一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...
html网页点击按钮闪现怎么解决,解决使用Vue.js显示数据的时,页面闪现原始代码的问题...
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 [v-cloak] { display ...
基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏
基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏基于Vue.js的数据统计系统(一) - 苏依蜀黍de小木屋 - 知乎专栏 posted on 2016-08-03 15: ...
Vue.js 根据数据，进行Table单元格合并
Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40 3493 收藏 2 展开表格代码 <table cellspacing=&q ...
Vue中的数据交互axios
数据交互 ajax: 原理必须要能说出来流程即可. jquery_ajax. 我们promise要结合它 Promise + async函数的前端的主要工作:1. 画页面.2. 请求ajax (后端 ...
vue.js 三种方式安装--npm安装
Vue.js是一个构建数据驱动的 web 界面的渐进式框架. Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合. ...
vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

vue.js 三（数据交互）isomorphic-fetch

vue.js 三（数据交互）isomorphic-fetch相关推荐

最新文章

热门文章