vue-cli 引入、配置axios的方法


Posted in Javascript onMay 08, 2018

一、npm 安装axios,文件根目录下安装,指令如下

npm install axios --save-dev 

二、修改原型链,在main.js中引入axios

import axios from 'axios' 

接着将axios改写为Vue的原型属性,

Vue.prototype.$http=axios 

这样之后就可在每个组件的methods中调用$http命令完成数据请求

三、在组件中使用

methods: { 
   get(){ 
    this.$http({ 
     method:'get', 
     url:'/url', 
     data:{} 
    }).then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
     
    this.$http.get('/url').then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
   }    
}

有关axios的配置请参考如下文档,点击打开链接

下面给大家介绍下vue-cli配置axios的方法

1.

npm install axios --save

2.

npm install @type/axios --save-dev(使用ts编写的需要此声明文件,升级的axios好像不需要了,已经自带)

3.

在src目录下添加axios.ts文件,内容:

import axios from 'axios'
import {Notification} from 'element-ui'
import store from './store/index'
import buildconf from '../config/build.rootpath.js'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = buildconf.serverUrl
// axios.defaults.baseURL = 'http://gsblackwidow.chinacloudsites.cn/'
axios.interceptors.request.use(function(config) {
 // document.getElementById('g-loader').style.display = 'flex'
 store.commit('requestModify', 1)
 return config;
}, function(error){
 return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
 store.commit('requestModify', -1)
 // document.getElementById('g-loader').style.display = 'none' 
 return response.data;
}, function(error){
 store.commit('requestModify', -1) 
 // document.getElementById('g-loader').style.display = 'none'  
 if(error.response.status === 401){
  Notification({
   title: '权限无效',
   message: '您的用户信息已经失效, 请重新登录',
   type: 'warning',
   offset: 48
  });
  window.location.href = '/#/login'
 }else{
  Notification({
   title: '请求错误',
   message: `${error.response.status} \n ${error.config.url}`,
   type: 'error',
   offset: 48,
  })
 }
 return Promise.reject(error)
})
export default axios

4.

types文件夹中新建vue.d.ts文件,内容:

import {AxiosStatic, AxiosInstance } from 'axios'
declare module 'vue/types/vue' {
 interface Vue {
  $axios: AxiosStatic;
 }
}

这样就可以在各个模块中通过this.$axios来使用axios了

其中axios中:

1. build.rootpath.js内容:

var path = require('path')
var rootpath = path.resolve(__dirname, '../dist')
module.exports = rootpath

2. store是vuex的文件,所以要事先安装vuex

总结

以上所述是小编给大家介绍的vue-cli 引入、配置axios的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 #Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 #Javascript
浅谈React 服务器端渲染的使用
May 08 #Javascript
vue.js做一个简单的编辑菜谱功能
May 08 #Javascript
You might like
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php数组键值用法实例分析
2015/02/27 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python操作redis方法总结
2018/06/06 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python netmiko模块的使用
2020/02/14 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python 如何上传包到pypi
2020/12/24 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
生日寿宴答谢词
2014/01/19 职场文书
遗产继承公证书
2014/04/09 职场文书
护理工作个人总结
2015/03/03 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis