vue-cli整合axios的幾種方法

Vue這個框架現在在單頁面應用方面非常受人歡迎。

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

首選的應該就是axios了

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

安裝的話自己去官網看

一、不推薦的方法

//在要使用網絡請求的組件中導入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' ，但是太過繁瑣，也不利於維護。

二、網絡請求較少

//打開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 }
})

三、推薦方法

用方法二已經可以滿足大部分需求了，寫的時候也比較爽，但是后期如果接口改變，還要一個個去查找修改，會顯得很雜亂

這里推薦一種自己平時的做法

//新建一個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 所以導入的時候必須帶{}

 

完！