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 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
js友好的时间返回函数
Aug 24 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
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中字符安全过滤函数使用小结
2015/02/25 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python计算字符宽度的方法
2016/06/14 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Linux的文件类型
2012/03/07 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
事务机电主管工作职责
2014/02/25 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
语文教育专业求职信
2014/06/28 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python