vue中axios的使用詳解
更新時(shí)間：2022年03月17日 16:07:23 作者：小碼哥呀
這篇文章主要為大家詳細(xì)介紹了vue中axios的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1、選擇什么網(wǎng)絡(luò)模塊
2、JSONP
3、axios的請(qǐng)求方式
網(wǎng)絡(luò)請(qǐng)求模擬：http://httpbin.org/
4、axios框架的基本使用
1、新建vue項(xiàng)目
vue init webpack learnaxios
2、安裝axios依賴
npm install axiox@0.18.0 --save
3、編寫(xiě)代碼
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
axios({
url:'http://123.207.32.32:8000/home/multidata'
}).then(res=>{
console.log(res);
})
axios({
url:'http://123.207.32.32:8000/home/data',
// 專門(mén)針對(duì)于get請(qǐng)求的參數(shù)拼接
params:{
type: 'pop',
page: 3
}
}).then(res=>{
console.log(res)
})
4、請(qǐng)求結(jié)果
5、axios發(fā)送并發(fā)請(qǐng)求
方式1：
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
// axios發(fā)送并發(fā)請(qǐng)求
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:5
}
})]).then(response=>{
console.log(response);
})
方式2
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
// axios發(fā)送并發(fā)請(qǐng)求
// 方式2
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:5
}
})]).then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
6、axios的配置
6.1、全局配置
6.2、常見(jiàn)的配置選項(xiàng)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例
本篇文章主要介紹了VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過(guò)示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了vuex中的state使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程
getters用于獲取state里的數(shù)據(jù),它類似于計(jì)算屬性,如果要獲取的數(shù)據(jù)并沒(méi)有發(fā)生變化的話,就會(huì)返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程,需要的朋友可以參考下2022-10-10
在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過(guò)程詳解
在一次項(xiàng)目腳手架升級(jí)的過(guò)程中，將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建，這篇文章主要介紹了在?Vite項(xiàng)目中，使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下2022-12-12
vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁(yè)面上,就會(huì)導(dǎo)致頁(yè)面卡頓,往往采用分頁(yè)和無(wú)限滾動(dòng)的方式來(lái)展示,本文主要介紹了vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12
vue element ui使用選擇器實(shí)現(xiàn)地區(qū)選擇兩種方法
這篇文章主要給大家介紹了關(guān)于vue element ui使用選擇器實(shí)現(xiàn)地區(qū)選擇的兩種方法,Element UI是一套基于Vue.js開(kāi)發(fā)的UI組件庫(kù),其中包含了地區(qū)選擇器(Cascader)組件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本文主要介紹了vue組件中重新渲染的3種方式小結(jié),主要包括改變key,v-if,vm.$forceUpdate()這三種,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Vue實(shí)現(xiàn)單行刪除與批量刪除，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04