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的多种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]
- 群星《妙音纪念珍藏版》蓝光BSCD[WAV+CUE][1G]
- 【发烧试音】蔡克信严讯人间天籁》[原抓WAV+CUE]
- [ABC唱片]山姆泰勒《西电之声·萨克斯风》[低速原抓WAV+CUE]
- 童丽《微风细雨XRCD2》[原抓WAV+CUE]
- 群星 《车乐坊1》DTS魔音[WAV+CUE][1.7G]
- 邓丽君.2024 -《生誕70年ベスト?アルバム 沒後30年》环球日版 [WAV+分轨][993M]
- 群星《一人一首成名曲》1998 台湾金碟珍藏版[WAV+CUE][1.1G]
- 陈百强2024-《凝望》头版限量编号MQA-UHQCD[WAV+CUE]
- 测试示范《监听天碟3》头版限量编号LECD[WAV+CUE]
- 陈瑞《爱你到天荒地老HQ》头版限量[低速原抓WAV+CUE]
- 徐小凤 《徐小凤殿堂18首》24K金碟[WAV+CUE]
- 保时捷原厂车载爆棚动态试音碟《Panamera_Soundtrack》DTS[WAV分轨][1G]