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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python实现聚类算法原理
2018/02/12 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python3 反射的四种基本方法解析
2019/08/26 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
鱼油专家:Omegavia
2016/10/10 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
标记环介质访问控制协议
2016/03/27 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
出生公证书样本
2014/04/04 职场文书
致共产党员倡议书
2014/04/16 职场文书
贷款担保书
2015/01/20 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
导游词之珠海轮廓
2019/10/25 职场文书