Vue組件化時使用axios處理ajax請求的使用

推薦方式

首先在 main.js 中引入 axios

// 引入 axios
import axios from 'axios'

這時候若是你想在其它的組件中使用axios進行ajax請求是或提示報錯的,報錯內容大體是axios is undefined
咱們一般的決絕方案是將axios改寫爲 Vue 的原型屬性,以下vue

axios寫入Vue的原型鏈做爲Vue的屬性

// 設置axios請求的默認host
axios.defaults.baseURL = "https://www.ifilm.ltd/api/"
// 將axios綁定給vue成爲一個屬性
Vue.prototype.$http = axios

在其餘組件中使用axios

this.$http.get('路由').then(response => {
        // todo something
      })

此方式能夠類比到Vue的其餘庫使用

兩種不推薦的使用示範

axios全局化,做爲全局變量

// 引入axios
import axios from 'axios'
// 將axios全局化
window.axios = axios;

另一個不太優雅的方式就是在須要的每一個組件中都引入對應的庫

相關文章
相關標籤/搜索