vue中資料請求的三種方法

2022-09-14 21:57:26 字數 2379 閱讀 7448

注意請求可能存在跨域問題,需要去配置好

這三種建議使用axios

vue 要實現非同步載入需要使用到 vue-resource 庫。

vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。

先導入乙個線上cdn的位址,當然還可以去npm安裝,但個人覺得不做專案的話使用這種測試方便

實現get請求

el: '#box',

data: ,

mounted() ,function());}})

如果需要傳遞資料,可以使用 this.$http.get('get.php',) 格式,第二個引數jsondata就是傳到後端的資料。

實現post請求

post 傳送資料到後端,需要第三個引數。

get方法

這個方法只能在位址列傳參

//get方法  只能在位址列傳參

post方法

另一種傳參方式

//post 另一種傳參方式

fetch(url, ,

body: json.stringify()

}).then(res => )

.then(data => )

axios 是乙個基於 promise 的 http 庫,可以用在瀏覽器和 node.js 中

用法和jq很類似

安裝或者引入cdn位址   npm i axios

get請求

el: '#box',

data: ,

mounted()

// }

).then(res => )}})

post請求

el: '#box',

data: ,

mounted()

).then(res => )}})

一次執行多個請求

el: '#box',

data: ,

mounted()

function fn2()

//注意這裡必須要使用陣列

axios.all([fn1() , fn2()])

//函式裡面對應的數字裡面的值

.then(axios.spread(function (fn1, fn2) ))}})

可以自己配置引數

el: '#box',

data: ,

mounted()

}).then(res => )}})

你可以自己定義乙個axios

//這裡建立乙個自定義配置的axios

var init = axios.create()

// 假設如果很多介面都需要使用 token驗證,可以把token資訊放在請求頭

init.defaults.headers.token = '1231654984561646546565464654654646321654asdasdasd'

el: '#box',

data: ,

mounted())

.then(res => )

//此方法也是一樣

init.get('/banner')

.then(res => )}})

***請求***和響應***

//請求前

axios.interceptors.request.use(function (config) , function (error) )

//響應前

axios.interceptors.response.use(function (config) , function (error) )

el: '#box',

data: ,

mounted()

})

另一篇:

html中vue資料請求的三種方法

1.resource vue 要實現非同步載入需要使用到 vue resource 庫。vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。如果需要傳遞資料,可以使用 this.http.get get.php 格式,第二個引數 jsondata 就是傳到後端的資料。實現post...

php傳送post請求的三種方法

引用 傳送post請求 param string url 請求位址 param array post data post鍵值對資料 return string function send post url,post data 使用方法,需要2個引數,url和引數,post的引數得自己構造,是陣列的格...

Vue全域性元件建立三種方法

my com1 my com1 my com2 my com2 template id tmp1 div id h1 外部定義元件的方式,擁有 提示 h1 div template 1.1使用vue.extends 來建立全域性的vue元件 var com1 vue.extend 使用vue.com...