vue-cli 使用axios的操作方法及整合axios的多种方法
2018-09-12 11:03
1056 查看
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中axios的使用方法
- vue中axios解决跨域问题和拦截器的使用方法
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- vue-cli的axios使用方法,get、post请求的跨域问题解决
- 在vue中通过axios异步使用echarts的方法
- vue-cli使用方法
- 使用npm安装vue脚手架cli或者angular-cli时出错的解决方法
- (Vue2.0)axios与vuex中actions结合使用的实现
- 详解Vue整合axios的实例代码
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- 基于vue-cli的vue项目之axios的使用4--并发请求
- vue组件化挖矿之旅(五):axios的使用
- vue-cli构建项目使用 less的方法
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- 基于vue-cli的vue项目之axios的使用1--准备工作
- vue-cli 使用axios
- vue-resource和vue-axios的简单使用方法
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- 基于vue-cli的vue项目之axios的使用3--get传参请求