vue-cli 使用axios的操作方法及整合axios的多種方法
1.創(chuàng)建vue腳手架
vue init webpack demo
2.cd 項(xiàng)目根目錄,再安裝axios
npm install axios -S
3.在main.js中
//把a(bǔ)xios賦值到vue的原型上,方便調(diào)用 Vue.prototype.$http = axios
4.在調(diào)用處
methods:{
axiosGet(){
let that = this;
that.$http.post('http://xxx.168.xx.220:5678/api/user/login',{
"UserAccount": "string",
"UserPassword": "string"
}).then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
})
}
}
5.可以在main.js中做一些配置
import qs from 'qs'
Vue.prototype.$http = axios
.create({
baseURL:'http://192.xx.10.xx:5678/api',
//請(qǐng)求前處理數(shù)據(jù)
transformRequest:[function(data){
console.log(data);
data=qs.stringify(data);
return data;
}],
//請(qǐng)求等待超時(shí)時(shí)間則中斷
timeout: 1500,
//請(qǐng)求后的data處理
transformResponse: [function (data) {
console.log(data);
return data;
}]
})
6.配置后可以在調(diào)用處省略一些代碼
that.$http({
method: 'post',
//這里的路徑是和main.js中的baseURL拼接而來(lái)的
url: '/user/login',
data: {
"UserAccount": "string",
"UserPassword": "string"
}
})
.then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
})
補(bǔ)充:vue-cli整合axios的幾種方法
Vue這個(gè)框架現(xiàn)在在單頁(yè)面應(yīng)用方面非常受人歡迎。
基于vue-cli創(chuàng)建的項(xiàng)目怎么樣才能更好地處理網(wǎng)絡(luò)請(qǐng)求?
首選的應(yīng)該就是axios了
這次給剛接觸vue的新手介紹一下axios在vue中如何使用
安裝的話自己去官網(wǎng)看
一、不推薦的方法
//在要使用網(wǎng)絡(luò)請(qǐng)求的組件中導(dǎo)入axios
import axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
//在這里調(diào)用網(wǎng)絡(luò)請(qǐng)求
request(){
axios.get(`url${this.params}`).then(result=>{
console.log(result)
})
}
}
}
這種方法比較麻瓜哪個(gè)文件要用就 import axios from 'axios' ,但是太過(guò)繁瑣,也不利于維護(hù)。
二、網(wǎng)絡(luò)請(qǐng)求較少
//打開(kāi)main.js全局導(dǎo)入axios
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//存在prototype中
Vue.prototype.$http = axios
//需要使用axios的其他組件調(diào)用時(shí)可以通過(guò)兩種方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是這樣使用會(huì)出現(xiàn)一個(gè)問(wèn)題,在單獨(dú)的js文件中這樣做調(diào)用不了$http,原因是沒(méi)有Vue的實(shí)例。大多數(shù)情況下用這種方法就可以滿足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
三、推薦方法
用方法二已經(jīng)可以滿足大部分需求了,寫(xiě)的時(shí)候也比較爽,但是后期如果接口改變,還要一個(gè)個(gè)去查找修改,會(huì)顯得很雜亂
這里推薦一種自己平時(shí)的做法
//新建一個(gè)JS命名為api
import axios from 'axios'
//在api中導(dǎo)入axios
let base = '/v1'
//把整個(gè)項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求都寫(xiě)在這個(gè)文件中用export導(dǎo)出
export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }
//這樣寫(xiě)方便管理整個(gè)項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求
//在我們要是用這個(gè)請(qǐng)求時(shí)比如說(shuō)getproduct
import {
getproduct
}from '../api/api';
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
getProductList(){
getproduct(this.params).then(result=>{
console.log(result);
})
}
}
}
//注意我們導(dǎo)出的時(shí)候用的是export 所以導(dǎo)入的時(shí)候必須帶{}
總結(jié)
以上所述是小編給大家介紹的vue-cli 使用axios的操作方法及整合axios的多種方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue實(shí)現(xiàn)虛擬滾動(dòng)的示例詳解
虛擬滾動(dòng)或者移動(dòng)是指禁止原生滾動(dòng),之后通過(guò)監(jiān)聽(tīng)瀏覽器的相關(guān)事件實(shí)現(xiàn)模擬滾動(dòng),下面小編就來(lái)和大家詳細(xì)介紹一下vue實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼,需要的可以參考下2023-10-10
vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07
vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下2019-04-04
Vue2使用cube-ui?實(shí)現(xiàn)搜索過(guò)濾、高亮功能
cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù),由于很長(zhǎng)一段時(shí)間沒(méi)有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了,今天通過(guò)本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過(guò)濾、高亮功能,感興趣的朋友跟隨小編一起看看吧2023-01-01
使用ElementUI循環(huán)生成的Form表單添加校驗(yàn)
這篇文章主要介紹了使用ElementUI循環(huán)生成的Form表單添加校驗(yàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
基于Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫(kù),它面向企業(yè)級(jí)的后臺(tái)應(yīng)用,能夠幫助你快速地搭建網(wǎng)站,極大地減少研發(fā)的人力與時(shí)間成本。這篇文章主要介紹了Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)功能,需要的朋友可以參考下2017-10-10
基于vue+openlayer實(shí)現(xiàn)地圖聚合和撒點(diǎn)效果
Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包,用于顯示地圖及空間數(shù)據(jù),并與之進(jìn)行交互,具有靈活的擴(kuò)展機(jī)制,本文給大家介紹vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果,感興趣的朋友一起看看吧2021-09-09

