vue-cli 使用axios的操作方法及整合axios的多种方法


Posted in Javascript onSeptember 12, 2018

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的多种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript的Cookies
Jan 16 Javascript
js全选按钮的实现方法
Nov 17 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
vue实现计步器功能
Nov 01 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 #Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 #Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 #Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 #Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 #Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
You might like
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python多线程用法实例详解
2015/01/15 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python正则表达式学习小例子
2020/03/03 Python
Keras搭建自编码器操作
2020/07/03 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
详解Scrapy Redis入门实战
2020/11/18 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
销售会计工作职责
2013/12/02 职场文书
个人自我评价分享
2013/12/20 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
组织鉴定材料
2014/06/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript