vue axios整合使用全攻略


Posted in Javascript onMay 24, 2018

惯例先安装axios,不多说!

cnpm install axios

1.axios配置

 我的目录结构src/axios/index.js,axios配置都在该文件下

src/axios/index.js 如下:

import axios from 'axios'
import qs from 'qs'
// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://localhost:8008';

拦截器,axios.interceptors.request.use发送请求前处理

axios.interceptors.response.use接受返回后,回调之前处理处理

//POST传参序列化
axios.interceptors.request.use((config) => {
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 return config;
},(error) =>{
 return Promise.reject(error);
});
//返回状态判断
axios.interceptors.response.use((res) =>{
 if(!res.data.success){
  return Promise.reject(res);
 }
 return res;
}, (error) => {
 //404等问题可以在这里处理
 return Promise.reject(error);
});

公共方法:

export function fetch(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
   .catch((error) => {
    reject(error)
   })
 })
}

业务方法:

export default {
 getAddressJson() {
  return fetch('/address/',{addressId:1})
 }
}

如果不理解可以将以上代码依次copy到src/axios/index.js文件,当然axios.defaults.baseURL = 'http://localhost:8008'; 需要换成自己的api。

2全局注册axios

为了使用axios,在各个组件中引入就可以使用:

import axios from './axios'

但是使用这种方法我们需要在每一个组件中去引入,有些麻烦,下面我们介绍一种全局注册的方法。

在main.js中:

import axios from './axios'
Vue.prototype.$axios = axios

添加这两行代码,将 axios 改写为 Vue 的原型属性,这样在各个组件中都可以使用axios,具体方法如下:

submitForm () {    
   this.$axios.getAddressJson().then(function (res) {
  //成功之后处理逻辑
    console.log(res)
   },function (res) {
    //失败之后处理逻辑
    console.log("error:"+res)
   })
  }

总结

以上所述是小编给大家介绍的vue axios整合使用全攻略,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue路由拦截及页面跳转的设置方法
May 24 #Javascript
使用Vue自定义指令实现Select组件
May 24 #Javascript
详解Vue单元测试case写法
May 24 #Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 #Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 #Javascript
react实现点击选中的li高亮的示例代码
May 24 #Javascript
浅谈Webpack 是如何加载模块的
May 24 #Javascript
You might like
用PHP实现递归循环每一个目录
2010/08/08 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python 数据的清理行为实例详解
2017/07/12 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
django模板语法学习之include示例详解
2017/12/17 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
空字符串(“”)和null的区别
2012/11/13 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
关于安全演讲稿
2014/05/09 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
关于倡议书的范文
2015/04/29 职场文书
《刷子李》教学反思
2016/02/20 职场文书