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 load Page,load css,load js实现代码
Mar 31 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
Vue看了就会的8个小技巧
Jan 21 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
oracle资料库函式库
2006/10/09 PHP
global.php
2006/12/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php实现删除空目录的方法
2015/03/16 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
外包公司软件测试工程师
2014/11/01 面试题
销售代表求职自荐信
2013/10/01 职场文书
机电专业毕业生求职信
2013/10/27 职场文书
敬老院活动总结
2014/04/28 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
师德标兵事迹材料
2014/12/19 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
罚款通知怎么写
2015/04/22 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
linux目录管理方法介绍
2022/06/01 Servers