1、安装vue-resource扩展: npm install vue-resource

2、在main.js中引入

import http from 'vue-resource'

3、使用方法

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

4、使用拦截器显示和隐藏loading效果 (需要用到vuex扩展,vuex使用方法戳这里

store.js 代码

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) // 定义初始值
const state = {
isShowLoading: false
} // 获取变量值
const getters = {
isShowLoading: state => state.isShowLoading
} //定义触发状态对象方法,传入state整个对象
//在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值
const mutations = {
setLoadingType(state, type) {
state.isShowLoading = type;
}
} //异步执行方法,传入参数context,等同于整个store
//处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)
const actions = {
setLoadingType({commit}, type) {
// 调用mutations 方法
commit('setLoadingType', type)
}
} export default new Vuex.Store({
state,
mutations,
actions,
getters
})

main.js 代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import http from 'vue-resource'
import $ from 'jquery'
// 引入sotre.js
import store from './components/common/store.js' Vue.config.productionTip = false Vue.use(http) Vue.http.interceptors.push((request, next) => {
// 也可以再这里验证是否登录等操作
// 显示loading
store.dispatch('setLoadingType', true);
next((response) => {
// 隐藏loading
store.dispatch('setLoadingType', false);
return response
});
}); /* eslint-disable no-new */
new Vue({
store,
el: '#app',
router,
render: h => h(App)
});

  

新建Loading.vue

<template id="loading-template" class="loading">
<div class="loading-overlay">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
</template> <script>
export default {
name: 'loading',
data () {
return {
msg: 'this.test uve'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
.loading-overlay {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
transition: all .6s;
}
</style>

App.vue 添加代码

<template>
<div id="app">
<div id="help">
<loading v-show="isShowLoading"></loading>
</div>
<router-link to="/Login">跳转到详情页</router-link>
<img src="./assets/logo.png">
<router-view></router-view>
</div> </template>
<script> import loading from './components/Loading'
import {mapGetters} from 'vuex'
export default {
name: 'app',
components:{
loading
},
data () {
return {
}
},
//computed 实时计算 Vue检测到数据发生变动时就会执行对相应数据有引用的函数。
computed: {
...mapGetters([
'isShowLoading'
])
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

  

vue http请求 vue-resource使用方法的更多相关文章

  1. vue http请求 vue自带的 vue-resource

    vue-resource安装 npm install vue-resource --save-dev 配置 在main.js中引入插件 //Resource 为自定义名 vue-resource 为插 ...

  2. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  3. vue开发请求本地模拟数据的配置方法(转)

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

  5. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  6. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  7. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  8. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  9. Vue 网络请求

    Vue网络请求,用的是vue-resource 1. 首先需要安装vue-resource npm install vue-resource 2. 安装好之后,会在package.json文件中自动加 ...

随机推荐

  1. Web app root system property already set to different value: 'webapp.root'

    java.lang.IllegalStateException: Web app root system property already set to different value: 'webap ...

  2. C++之const类成员变量,const成员函数

    const修饰类的成员函数 const修饰变量一般有两种方式:const T *a,或者 T const *a,这两者都是一样的,主要看const位于*的左边还是右边,这里不再赘述,主要来看一下当co ...

  3. C/C++获取操作系统、CPU、内存信息(windows和linux)

    有时候需要在工程里面获取一些系统或者硬件的信息,比如系统版本,cpu,内存,显卡,硬盘等,作为后续软件功能判断的依据,甚至参与性能算法自适应建模 Windows 操作系统和内存信息在windows下通 ...

  4. 网页元素定位Position

     第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) stati ...

  5. python 之元类

    定义类的两种方法: 1.class定义 2.type(类名,类的基类们,类的名称空间) # 定义类的三要素:类名.基类.名称空间 class_name = 'Chinese' class_bases ...

  6. TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性

    11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...

  7. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  8. 02-安装JDK - Java快速入门

    jdk安装的版本

  9. Laravel中的查询构造器

    public function query(){ //新增数据 //$bool = DB::table('wd_user')->insert(['username'=>'jack']); ...

  10. Makefile研究(二)—— 完整可移植性模板

    转自:http://blog.csdn.net/jundic/article/details/17676461 一直想写一个很全很好移植的Makefile模板,我觉得一个完整makefile 应该包含 ...