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的设计模式
Nov 22 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
什么是SOLID
Mar 24 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
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
python wsgiref源码解析
2021/02/06 Python
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
应届生自我鉴定
2013/12/11 职场文书
工作中个人的自我评价
2013/12/31 职场文书
财产公证书样本
2014/04/04 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
雷锋电影观后感
2015/06/10 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸