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的多种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: