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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 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
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
谈谈JS中的!!
2017/12/07 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python如何提升爬虫效率
2020/09/27 Python
python实现简单猜单词游戏
2020/12/24 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
了解AppleTalk协议吗
2014/04/01 面试题
省三好学生申请材料
2014/01/22 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
战略合作协议书范本
2014/04/18 职场文书
食品安全宣传标语
2014/06/07 职场文书
万能检讨书2000字
2014/10/17 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL