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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
javascript实现微信分享
Dec 23 Javascript
js获取域名的方法
Jan 27 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
jQuery的事件预绑定
Dec 05 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
php模板函数 正则实现代码
2012/10/15 PHP
PHP缓冲区用法总结
2016/02/14 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
JSF的标签库有哪些
2012/04/27 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
优秀党员主要事迹
2014/01/19 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
学校百日安全活动总结
2015/05/07 职场文书
《我是什么》教学反思
2016/02/16 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫