vue-cli整合axios的幾種方法

Vue這個框架如今在單頁面應用方面很是受人歡迎。

基於vue-cli建立的項目怎麼樣才能更好地處理網絡請求？

首選的應該就是axios了

此次給剛接觸vue的新手介紹一下axios在vue中如何使用

安裝的話本身去官網看

1、不推薦的方法

//在要使用網絡請求的組件中導入axios
import axios from 'axios' 
export default {
  name: 'HelloWorld',
  data () {
    return {
      params:{}
    }
  },
  methods: {
//在這裏調用網絡請求
    request(){
      axios.get(`url${this.params}`).then(result=>{
        console.log(result)
    })
    }
  }
}

這種方法比較麻瓜哪一個文件要用就  import axios from 'axios' ，可是太過繁瑣，也不利於維護。

2、網絡請求較少

//打開main.js全局導入axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

//存在prototype中
Vue.prototype.$http = axios

//須要使用axios的其餘組件調用時能夠經過兩種方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//可是這樣使用會出現一個問題，在單獨的js文件中這樣作調用不了$http,緣由是沒有Vue的實例。大多數狀況下用這種方法就能夠知足大部分需求了

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3、推薦方法

用方法二已經能夠知足大部分需求了，寫的時候也比較爽，可是後期若是接口改變，還要一個個去查找修改，會顯得很雜亂

這裏推薦一種本身平時的作法

//新建一個JS命名爲api
import axios from 'axios' 
//在api中導入axios
let base = '/v1'

//把整個項目的網絡請求都寫在這個文件中用export導出

export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }

//這樣寫方便管理整個項目的網絡請求

//在咱們要是用這個請求時好比說getproduct

import {
    getproduct
  }from '../api/api';
export default {
  name: 'HelloWorld',
  data () {
    return {
      params:{}
    }
  },
  methods: {
    getProductList(){
      getproduct(this.params).then(result=>{
        console.log(result);
      })
    }
  }
}
//注意咱們導出的時候用的是export 因此導入的時候必須帶{}

 

完！