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 Event学习第七章 事件属性
Feb 07 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
Vue computed 计算属性代码实例
Apr 22 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开发需要注意的安全问题
2010/09/01 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
基于Pytorch SSD模型分析
2020/02/18 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
《世界多美呀》教学反思
2014/03/02 职场文书
党员承诺书怎么写
2014/05/20 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
新教师教学工作总结
2015/08/14 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Redis可视化客户端小结
2021/06/10 Redis
JavaScript执行机制详细介绍
2021/12/06 Javascript