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

cyixlq 發布于2019-08-20 18:56 / 3018人閱讀

摘要：推薦方式首先在中引入引入這時候如果你想在其它的組件中使用進行請求是或提示報錯的，報錯內容大致是。

推薦方式 首先在 main.js 中引入 axios

// 引入 axios
import axios from "axios"

這時候如果你想在其它的組件中使用axios進行ajax請求是或提示報錯的，報錯內容大致是axios is undefined。
我們通常的決絕方案是將axios改寫為 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;

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84899.html

axios異步請求數據的簡單使用

摘要：使用模擬好后端數據之后模擬數據的使用參考，就需要嘗試請求加載數據了。數據請求選擇了，現在都推薦使用。規定要發送到服務器的數據。布爾值，表示請求是否異步處理。要求為類型的參數，請求成功后調用的回調函數。在一個中重寫回調函數的字符串。使用Mock模擬好后端數據之后（Mock模擬數據的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數據了。數...

forsigner 2019-08-23 14:40 評論0 收藏0
vue的axios組件如何與PHP后端交換數據

摘要：本文的目的在于探討前后端數據交互，并給出不同的解決方案供大家參考。實際使用只需在配置文件配置其他配置其他組件配置以上就是前端處理和后端處理兩種解決方案，可根據實際情況選擇一、前言 axios是vue項目中用來使用ajax技術來與后臺交換數據的一個組件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但是在實際開發過程中，卻時有出現后端接收不到前端post過來的數據的情況...

韓冰 2019-08-22 17:09 評論0 收藏0
vue的axios組件如何與PHP后端交換數據

摘要：本文的目的在于探討前后端數據交互，并給出不同的解決方案供大家參考。實際使用只需在配置文件配置其他配置其他組件配置以上就是前端處理和后端處理兩種解決方案，可根據實際情況選擇一、前言 axios是vue項目中用來使用ajax技術來與后臺交換數據的一個組件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但是在實際開發過程中，卻時有出現后端接收不到前端post過來的數據的情況...

CloudwiseAPM 2019-07-01 12:27 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

Backache 2019-08-22 18:29 評論0 收藏0