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

cyixlq 發(fā)布于2019-08-20 18:56 / 3012人閱讀

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

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

// 引入 axios
import axios from "axios"

這時候如果你想在其它的組件中使用axios進(jìn)行ajax請求是或提示報錯的，報錯內(nèi)容大致是axios is undefined。
我們通常的決絕方案是將axios改寫為 Vue 的原型屬性,如下

將axios寫入Vue的原型鏈作為Vue的屬性

// 設(shè)置axios請求的默認(rèn)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;

另外一個不太優(yōu)雅的方式就是在需要的每個組件中都引入對應(yīng)的庫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84899.html

相關(guān)文章

axios異步請求數(shù)據(jù)的簡單使用

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

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

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

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

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

CloudwiseAPM 2019-07-01 12:27 評論0 收藏0
淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

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