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中如何使用
安裝的話自己去官網看
一、不推薦的方法
//在要使用網絡請求的組件中導入axiosimport 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全局導入axiosimport 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命名為apiimport axios from 'axios' //在api中導入axioslet base = '/v1'//把整個項目的網絡請求都寫在這個文件中用export導出export const getproduct = params => { return axios.get(`${base}/product/info/${params}`) }//這樣寫方便管理整個項目的網絡請求//在我們要是用這個請求時比如說getproductimport { 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的多種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
