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 事件对象的实现
Jul 13 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
js实现下拉菜单效果
Mar 01 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
深入理解Node module模块
Mar 26 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
React配置子路由的实现
Jun 03 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
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
js中let和var定义变量的区别
2018/02/08 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
python插入排序算法的实现代码
2013/11/21 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
详解python 内存优化
2020/08/17 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
学校证明范文
2015/06/24 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python