vue 组件的封装之基于axios的ajax请求方法
作者:scorpio_h
今天小编就为大家分享一篇vue 组件的封装之基于axios的ajax请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
如下所示:
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模块前后端交互的使用(类似ajax提交)
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- vue结合axios与后端进行ajax交互的方法
- 关于vue中的ajax请求和axios包问题
- vue axios 在页面切换时中断请求方法 ajax
- axios进阶实践之利用最优雅的方式写ajax请求
- 关于前端ajax请求的优雅方案(http客户端为axios)
- 在Vue组件化中利用axios处理ajax请求的使用方法
- vue使用Axios做ajax请求详解
- VUE 更好的 ajax 上传处理 axios.js实现代码
- Ajax常用封装库——Axios的使用