SpringBoot 项目的 html 页面使用 axios 进行 get post 请求

说明:本项目为 SpringBoot 项目而不是 vue 项目,本项目用于练习 axios 使用 get 及 post 请求 get 和 post 请求都采用两种方式进行配置,并注明易错点
@[toc]
1.axios 是什么
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,axios 是对 ajax 的一种封装,而 jquery 也是对 ajax 的一种封装。axios 的 github:https://github.com/axios/axios
2.vue 项目为什么使用 axios,而不使用 jquery?
axios 集成 vue 更好且占内存小,而如果只用 jquery 的 ajax 的话,毕竟几百 k,$表达式也不用情况下显得太笨重了,因此 vue 项目使用 axios 居多且集成的更好。
3.SpringBoot 项目的 html 页面引入 axios 方式,采用 script 引入
至于网上说的方案,对 springboot 项目测试无效 import axios from ‘axios’;//安装方法 npm install axios//或 bower install axios
4.官网为方便起见,为所有支持的请求方法提供了别名
5.get 请求的两种方式
使用方式 1(推荐) => axios.get();注意 1:headers 请求头设置位置不一样,axios.get()中 headers 存在于{}中,而 axios({})中 headers 当成一个 key,value 进行设置。注意 2:get 请求参数封装与 params 对象中。
使用方式 2 => axios({})
6.post 请求的两种方式
使用方式 1(推荐) => axios.post();注意点 1:headers 请求头设置位置不一样,axios.post()中 headers 存在于第三个{}中,而 axios({})中 headers 当成一个 key,value 进行设置。注意点 2:axios.post()的第二个{}指代请求体中没有作为 key 的 data,而 axios({})中使用 data 作为请求体参数。
使用方式 2 => axios({})
本人相关其他文章链接
1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化
2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf
评论