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 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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编程开发“虚拟域名”系统
2006/10/09 PHP
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php中$this->含义分析
2009/11/29 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php生成图片缩略图的方法
2015/04/07 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
详解如何运行vue项目
2019/04/15 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
Python中bisect的用法
2014/09/23 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python不同系统中打开方法
2020/06/23 Python
python合并多个excel文件的示例
2020/09/23 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
PHP数据运算类型都有哪些
2013/11/05 面试题
日语专业个人求职信范文
2014/02/02 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
材料会计岗位职责
2014/03/06 职场文书
实习单位证明范例
2014/11/17 职场文书
实习班主任自我评价
2015/03/11 职场文书
开场白怎么写
2015/06/01 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python