vue http请求 vue-resource使用方法
Posted 狗哥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue http请求 vue-resource使用方法相关的知识,希望对你有一定的参考价值。
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使用方法的主要内容,如果未能解决你的问题,请参考以下文章