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实现字符串的16进制编码不加密
Apr 25 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
原生js实现分页效果
Sep 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
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python的print用法示例
2014/02/11 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python端口扫描简单程序
2016/11/10 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python 类之间的参数传递方式
2019/12/20 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
nohup的用法
2014/08/10 面试题
十岁生日父母答谢词
2014/01/18 职场文书
投标邀请书范文
2014/01/31 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
个人廉政承诺书
2015/04/28 职场文书