vue 组件的封装之基于axios的ajax请求方法


Posted in Javascript onAugust 11, 2018

如下所示:

import Vue from 'vue'
 
let service = {
 url: 'http://host.xxxxx.com/xxx.php'
}
 
service.ajaxReuqest = (url, options, type, fileFlag) => {
 for (const i in options) {
 if (!options[i] && options[i] !== 0 && (options[i].length && options[i].length > 0)) {
  delete options[i]
 }
 }
 let promise = new Promise((resolve, reject) => {
 if (fileFlag) {
  Vue.axios.post(url, options, {
  headers: {
   'Content-Type': 'multipart/form-data'
  }
  }).then((res) => {
  resolve(res)
  })
 } else if (type === 'GET') {
  Vue.axios.get(url, { params: options }).then((res) => {
  resolve(res.data.resultObj)
  }).then((err) => {
  reject(err)
  })
 } else {
  Vue.axios.post(url, options).then((res) => {
  resolve(res)
  }).then((err) => {
  reject(err)
  })
 }
 })
 return promise
}

支持POST GET请求以及图片上传,基于axios,适用于vue,

以异步获取省份列表作为例子:

// 获取省份信息
service.getProvinceList = (options) => {
 return service.ajaxRequest(service.url + '/basic/getProvinceList', options, 'POST')
}
getProvinceList () {
 service.getProvinceList({}).then((res) => {
  this.provinceList = res.data.resultObj.data
 })
}

以上这篇vue 组件的封装之基于axios的ajax请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery操作select大全
Apr 25 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 #Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 #Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 #Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 #Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 #Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 #Javascript
You might like
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
javascript变量提升和闭包理解
2018/03/12 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
Python计算回文数的方法
2015/03/11 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
小学门卫岗位职责
2013/12/17 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
企业总经理岗位职责
2014/02/13 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
高一军训决心书
2015/02/05 职场文书
幼儿园开学通知
2015/04/24 职场文书
大学生暑期实践报告
2015/07/13 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS