Vue+axios封装请求实现前后端分离


Posted in Javascript onOctober 23, 2020

本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下

前言

我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件

# 一、封装axios
vue.config.js 配置文件

module.exports = {
 configureWebpack: {
 resolve: {
 alias: {
 api: '@/api',
 assets: '@/assets',
 components: '@/components',
 layouts: '@/layouts',
 router: '@/router',
 store: '@/store',
 utils: '@/utils',
 views: '@/views'
 }
 }
 },
 devServer: {
 //端口
 port: 8081,
 //后端接口
 proxy: {
 '/api': {
 target: 'http://localhost:8099', // 目标代理接口地址
 changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端
 // ws: true, // 是否启用websockets
 pathRewrite: {
  '^/api': ''
 }
 }
 }
 }
}

request.js,封装组件

//配置axios
import axios from 'axios'

const instance = axios.create({
 baseURL: '/api',
 timeout: 6000
})


instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//请求拦截器
instance.interceptors.request.use(
 function(config) {
 return config
 },
 function(error) {
 //对请求错误做些什么
 return Promise.reject(error)
 }
)
//响应拦截器
instance.interceptors.response.use(
 function(response) {
 return response.data
 },
 function(error) {
 //对响应错误做点什么
 return Promise.reject(error)
 }
)

export default function(method, url, data = '', config = '') {
 method = method.toLowerCase()
 if (method === 'post') {
 if (config !== '') {
 return instance.post(url, data, config)
 } else {
 return instance.post(url, data)
 }
 } else if (method === 'get') {
 return instance.get(url, {params: data})
 } else if (method === 'delete') {
 return instance.delete(url, {params: data})
 } else if (method === 'put') {
 return instance.put(url, data)
 } else {
 console.error('未知的method' + method)
 return false
 }
}

api.js,接口文件

import req from '@/utils/request'

/**
 * 批量查询
 * @param params
 */
export const list = params => req("get", "/resource/list", params);

具体的页面之中进行导入使用即可

总结

这就是vue中对于axios的初步封装使用,后续会持续更新

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
JS如何生成随机验证码
Mar 02 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
React实现评论的添加和删除
Oct 20 #Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 #Javascript
微信小程序使用前置摄像头拍照
Oct 22 #Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
You might like
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
.net开发工程师面试题
2014/02/25 面试题
网上书店创业计划书
2014/01/12 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
学习经验交流会主持词
2014/04/01 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
倡议书范文
2014/04/16 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
区域经理岗位职责
2015/02/02 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers