广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
4008-888-888

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

借力牛商网小程序_Vue+axios封装请务实现前后端别

日期:2021-01-05 浏览:
Vue+axios封装请求实现前后端分离       这篇文章主要为大家详细介绍了Vue+axios封装请求实现前后端分离,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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: '/ 目标代理接口地址
 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学习教程请阅读专题

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




新闻资讯

联系方式丨CONTACT

  • 全国热线:4008-888-888
  • 传真热线:010-88888888
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系