vue中axios的使用詳解
更新時間：2022年03月17日 16:07:23 作者：小碼哥呀
這篇文章主要為大家詳細介紹了vue中axios的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1、選擇什么網絡模塊
2、JSONP
3、axios的請求方式
網絡請求模擬：http://httpbin.org/
4、axios框架的基本使用
1、新建vue項目
vue init webpack learnaxios
2、安裝axios依賴
npm install axiox@0.18.0 --save
3、編寫代碼
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',
// 專門針對于get請求的參數(shù)拼接
params:{
type: 'pop',
page: 3
}
}).then(res=>{
console.log(res)
})
4、請求結果
5、axios發(fā)送并發(fā)請求
方式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ā)請求
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ā)請求
// 方式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、常見的配置選項
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應用技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面添加水印效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中注冊全局組件的三種方式,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue自定義filters過濾器的相關知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
這篇文章主要介紹了實現(xiàn)一個 Vue 吸頂錨點組件方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
mockjs是用來模擬產生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。這篇文章主要介紹了vue項目中mock.js的使用,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在Vue實例中,data屬性是用戶定義的用于存儲數(shù)據(jù)的對象,而_data是Vue內部用于存儲數(shù)據(jù)的對象,本文主要介紹了淺談vue中的data與_data的關系是什么,感興趣的可以了解一下2023-12-12
vue使用Vue.extend方法仿寫個loading加載中效果實例
在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關于vue使用Vue.extend方法仿寫個loading加載中效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06