vue http請求 vue-resource使用方法

標籤：turn   exp   webkit   context   target   lint   weight   登入   route   

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.jsimport store from ‘./components/common/store.js‘Vue.config.productionTip = falseVue.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使用方法