vue 组件的封装之基于axios的ajax请求方法
2018-08-11 15:30
1356 查看
如下所示:
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请求方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 浅谈在Vue-cli里基于axios封装复用请求
- vue 组件的封装之基于axios的ajax请求
- 在Vue-cli里基于axios封装复用请求
- 基于axios封装fetch方法及调用
- 基于axios封装fetch方法及调用实例
- vue通过axios发送put/post等请求,配合后台consume"MediaType.APPLICATION_FORM_URLENCODED"
- Vue——axios基本配置及请求拦截
- 通过 HTTP 请求加载远程数据(ajax,axios)
- 详解vue中axios的封装
- iOS开发--Swift 基于AFNetworking 3.0的网络请求封装
- iOS网络请求工具oc版,swift版基于AFNetworking的简单封装
- 基于Vue封装分页组件
- vue-cli 使用axios的操作方法及整合axios的多种方法
- 基于jquery的$.ajax再次封装(可以防止重复请求)
- 在vue中通过axios异步使用echarts的方法
- vue中axios处理http发送请求的示例(Post和get)
- vue中Axios的封装与API接口的管理详解
- 基于Vue的ajax公共方法(详解)
- 关于apicloud开发中对vue和ajax方法的封装
- 源码推荐(01.04B):基于AFNetworking3.0的网络请求封装,iOS仿苹果健康折线图