vue项目中axios请求网络接口封装的示例代码


Posted in Javascript onDecember 18, 2018

每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下:

(1).新建一个js文件,取名api.js

(2).引入 axios ,mint-UI ,如下图:

import axios from 'axios'
import {MessageBox, Toast} from 'mint-ui'

axios.defaults.timeout = 50000//默认请求超时时间
axios.defaults.headers = '请求头'

(2).封装get方法

export function getHttp (url, params = {}) {
 // 创建动画mint-ui
 Indicator.open({
 text: '加载中...',
 spinnerType: 'fading-circle'
 })
 return new Promise((resolve, reject) => {
 axios.get(url, {
  params: params
 })
  .then(response => {
  resolve(response.data)
   Indicator.close() // // 关闭动画
  })
  .catch(err => {
  reject(err)
   Indicator.close() // // 关闭动画
  MessageBox.alert('message', err)
  })
 })
}

(4).封装post方法

export function postHttp (url, data = {}) {
 Indicator.open({
 text: '加载中...',
 spinnerType: 'fading-circle'
 })
 return new Promise((resolve, reject) => {
 axios.post(url, data)
  .then(response => {
  if (response.data.status == 1) {
   resolve(response.data)
  } else {
   Toast(response.data.msg)
  }
  Indicator.close() // // 关闭动画
  }, (err) => {
  reject(err)
  Indicator.close()
  })
 })
}

(5).封装后方法的使用

在main.js中引入全局变量

import {getHttp, postHttp} from './config/api'
Vue.prototype.$getHttp = getHttp
Vue.prototype.$postHttp = postHttp
//get网络请求
  this.$getHttp(this.$shopUrl + 'api/product/list',)
  .then((response) => {
   response.result//请求返回数据
  })

 // post网络请求

  this.$postHttp(this.$shopUrl + 'api/product/list',)
  .then((response) => {
   response.result//请求返回数据
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript中string 的replace
Apr 12 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
JS中判断null的方法分析
Nov 21 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 #Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 #Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 #Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 #Javascript
详解Vue This$Store总结
Dec 17 #Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
You might like
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
详解JavaScript执行模型
2020/11/16 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
我们的节日春节活动方案
2014/08/22 职场文书
授权委托书样本
2014/09/25 职场文书
投资意向协议书
2015/01/29 职场文书
大国崛起观后感
2015/06/02 职场文书
2016年少先队活动总结
2016/04/06 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
PHP正则表达式之RCEService回溯
2022/04/11 PHP