vue实现的请求服务器端API接口示例


Posted in Javascript onMay 25, 2019

本文实例讲述了vue实现的请求服务器端API接口。分享给大家供大家参考,具体如下:

import axios from 'axios'
import router from '@/router'
axios.defaults.timeout = 3000
axios.defaults.baseURL = ''
axios.interceptors.request.use(
 config => {
  // const token = getCookie('名称')
  config.data = config.data
  config.headers = {
   'Content-Type': 'application/json; charset=utf-8'
  }
  if (config.url === '/api/login/index') {
  } else {
   if (localStorage.getItem('Authorization')) {
    config.headers.Authorizatior = localStorage.getItem('Authorization')
   }
  }
  // if (token) {
  // config.params = {'token': token}
  // }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
axios.interceptors.response.use(
 response => {
  //返回错误跳转到首页
  if (response.data.code === 0) {
   router.push({
    path: '/',
    querry: {
     redirect: router.currentRoute.fullPath
    }
   })
  }
  return response
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     localStorage.removeItem('Authorization')
     router.push('/login')
   }
  }
  return Promise.reject(error)
 }
)
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetch (url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data)
  })
  .catch(err => {
   reject(err)
  })
 })
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
  .then(response => {
   resolve(response.data)
  }, err => {
   reject(err)
  })
 })
}
/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch (url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data)
   }, err => {
    reject(err)
   })
 })
}
/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put (url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data)
   }, err => {
    reject(err)
   })
 })
}

main.js调用

import { fetch, post, patch, put } from '@/util/fetch'
Vue.prototype.get = fetch
Vue.prototype.post = post
Vue.prototype.patch = patch
Vue.prototype.put = put

视图页面使用 

export default {
 name: 'login',
 data () {
  return {
   mobile: '',
   password: ''
  }
 },
 components: {
  XInput,
  XButton,
  Group,
  Box
 },
 methods: {
  handleLogin () {
   let params = {}
   params.username = this.mobile
   params.password = this.password
   this.post('/api/driver/index', params).then((data) => {
    console.log(data)
   }).catch((error) => {
    console.log(error)
   })
  }
 }
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js操作滚动条事件实例
Jan 29 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
泛谈JS逻辑判断选择器 || &&
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
You might like
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python入门篇之文件
2014/10/20 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python中spy++的使用超详细教程
2021/01/29 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
商务助理岗位职责
2013/11/13 职场文书
大学毕业自我评价
2014/02/02 职场文书
学生鉴定评语大全
2014/05/05 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
结婚保证书
2015/01/16 职场文书
董事长致辞
2015/07/29 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS