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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
vue component组件使用方法详解
Jul 14 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jquery json 实例代码
2010/12/02 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
javascript实现倒计时效果
2020/02/17 Javascript
Flask之请求钩子的实现
2018/12/23 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Numpy数组的广播机制的实现
2020/11/03 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
关于安全演讲稿
2014/05/09 职场文书
二人合伙经营协议书
2014/09/13 职场文书
社区党员干部承诺书
2015/05/04 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis