vue-cli 使用axios的操作方法及整合axios的多种方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue-cli 使用axios的操作方法及整合axios的多种方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3046字,纯文字阅读大概需要5分钟。
内容图文
![vue-cli 使用axios的操作方法及整合axios的多种方法](/upload/InfoBanner/zyjiaocheng/336/abd9c19afd0347768064199ffb695e36.jpg)
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的多种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的vue-cli 使用axios的操作方法及整合axios的多种方法全部内容,希望文章能够帮你解决vue-cli 使用axios的操作方法及整合axios的多种方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。