搭建springboot+vue前后端分离项目---Axios的使用

zxyao19

已于 2022-08-30 15:10:48 修改

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-30 14:50:32 首次发布

本文链接：https://blog.csdn.net/m0_51514458/article/details/126602857

版权

本文介绍了如何在SpringBoot+Vue项目中使用Axios进行前后端数据交互。Axios是一个基于Promise的HTTP库，适用于浏览器和node.js。通过封装Axios，可以方便地发送HTTP请求，包括GET、POST、PUT、PATCH和DELETE等方法。同时，文章提到了解决Vue项目跨域问题的方法。

摘要由CSDN通过智能技术生成

通过Axios实现前后台数据交互

封装后可将命令发送给后台

Axios（ajax i/o system）：
本质上是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造）
——————————————————————————————————————

具体实现方法

1.安装axios插件

npm i axios -s

2.创建工具类文件夹utils，写入request.js封装Axios

import axios from 'axios'

const request = axios.create({
	baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！&#x