vue-cli 使用axios的操作方法及整合axios的多种方法
程序员文章站
2022-03-22 08:19:41
1.创建vue脚手架
vue init webpack demo
2.cd 项目根目录,再安装axios
npm install axios -s
3.在main....
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的多种方法,希望对大家有所帮助