Vue組件化時(shí)使用axios處理ajax請(qǐng)求的使用

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

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

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

// 引入 axios
import axios from "axios"

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

將axios寫(xiě)入Vue的原型鏈作為Vue的屬性

// 設(shè)置axios請(qǐng)求的默認(rèn)host
axios.defaults.baseURL = "https://www.ifilm.ltd/api/"
// 將axios綁定給vue成為一個(gè)屬性
Vue.prototype.$http = axios

在其他組件中使用axios

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

此方式可以類比到Vue的其他庫(kù)使用 兩種不推薦的使用示范 將axios全局化，作為全局變量

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84899.html

相關(guān)文章

axios異步請(qǐng)求數(shù)據(jù)的簡(jiǎn)單使用

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

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

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

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

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

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

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

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

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

Backache 2019-08-22 18:29 評(píng)論0 收藏0