vue-cli整合axios的幾種方法

標籤：維護   兩種   const   component   config   res   nts   情況下   需求   

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

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

首選的應該就是axios了

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

安裝的話自己去官網看

一、不推薦的方法

//在要使用網路請求的組件中匯入axiosimport 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全域匯入axiosimport 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命名為apiimport axios from ‘axios‘ //在api中匯入axioslet base = ‘/v1‘//把整個項目的網路請求都寫在這個檔案中用export匯出export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }//這樣寫方便管理整個項目的網路請求

//在我們要是用這個請求時比如說getproductimport {    getproduct  }from ‘../api/api‘;export default {  name: ‘HelloWorld‘,  data () {    return {      params:{}    }  },  methods: {    getProductList(){      getproduct(this.params).then(result=>{        console.log(result);      })    }  }}//注意我們匯出的時候用的是export 所以匯入的時候必須帶{}

 

完！

 

vue-cli整合axios的幾種方法