溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.創建vue腳手架
vue init webpack demo
2.cd 項目根目錄，再安裝axios
npm install axios -S
3.在main.js中
//把axios賦值到vue的原型上，方便調用 Vue.prototype.$http = axios
4.在調用處
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',
//請求前處理數據
transformRequest:[function(data){
console.log(data);
data=qs.stringify(data);
return data;
}],
//請求等待超時時間則中斷
timeout: 1500,
//請求后的data處理
transformResponse: [function (data) {
console.log(data);
return data;
}]
})
6.配置后可以在調用處省略一些代碼
that.$http({
method: 'post',
//這里的路徑是和main.js中的baseURL拼接而來的
url: '/user/login',
data: {
"UserAccount": "string",
"UserPassword": "string"
}
})
.then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
})
補充：vue-cli整合axios的幾種方法
Vue這個框架現在在單頁面應用方面非常受人歡迎。
基于vue-cli創建的項目怎么樣才能更好地處理網絡請求？
首選的應該就是axios了
這次給剛接觸vue的新手介紹一下axios在vue中如何使用
安裝的話自己去官網看
一、不推薦的方法
//在要使用網絡請求的組件中導入axios
import axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
//在這里調用網絡請求
request(){
axios.get(`url${this.params}`).then(result=>{
console.log(result)
})
}
}
}
這種方法比較麻瓜哪個文件要用就 import axios from 'axios' ，但是太過繁瑣，也不利于維護。
二、網絡請求較少
//打開main.js全局導入axios
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
//存在prototype中
Vue.prototype.$http = axios
//需要使用axios的其他組件調用時可以通過兩種方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是這樣使用會出現一個問題，在單獨的js文件中這樣做調用不了$http,原因是沒有Vue的實例。大多數情況下用這種方法就可以滿足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
三、推薦方法
用方法二已經可以滿足大部分需求了，寫的時候也比較爽，但是后期如果接口改變，還要一個個去查找修改，會顯得很雜亂
這里推薦一種自己平時的做法
//新建一個JS命名為api
import axios from 'axios'
//在api中導入axios
let base = '/v1'
//把整個項目的網絡請求都寫在這個文件中用export導出
export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }
//這樣寫方便管理整個項目的網絡請求
//在我們要是用這個請求時比如說getproduct
import {
getproduct
}from '../api/api';
export default {
name: 'HelloWorld',
data () {
return {
params:{}
}
},
methods: {
getProductList(){
getproduct(this.params).then(result=>{
console.log(result);
})
}
}
}
//注意我們導出的時候用的是export 所以導入的時候必須帶{}
總結
以上所述是小編給大家介紹的vue-cli 使用axios的操作方法及整合axios的多種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
