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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 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实现的冒泡排序算法分享
2014/08/21 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python requests 使用快速入门
2017/08/31 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python logging模块的使用详解
2020/10/23 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
入党积极分子自我鉴定范文
2014/03/25 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
学习礼仪心得体会
2014/09/01 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python