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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
微信小程序实现自定义底部导航
Nov 18 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
YII路径的用法总结
2014/07/09 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
php简单压缩css样式示例
2016/09/22 PHP
利用php生成验证码
2017/02/23 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
如何验证python安装成功
2020/07/06 Python
python speech模块的使用方法
2020/09/09 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
架构师岗位职责
2013/11/18 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android