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 笔记二 Array和Date对象方法
May 22 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
详解vue-router导航守卫
Jan 19 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
可以在线执行PHP代码包装修正版
2008/03/15 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
JavaScript Prototype对象
2009/01/07 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
使用python实现tcp自动重连
2017/07/02 Python
python实现flappy bird小游戏
2018/12/24 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
目标责任书范文
2014/04/14 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015学校年度工作总结
2015/05/11 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js