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 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 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查询快递信息的方法
2015/03/07 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
打架检讨书400字
2014/01/17 职场文书
成绩单公证书
2014/04/10 职场文书
文明寝室标语
2014/06/13 职场文书
2015教师年度考核评语
2015/03/25 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
详解MySQL集群搭建
2021/05/26 MySQL
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS