VUE之axios总结
目录
什么是axios
功能特点
请求类型
定义axios前缀
axios的书写格式
属性信息
params和data的方式区别
params
data
使用案例
使用前
axios简写形式
注意：
简写形式实践
针对不同请求类型的用法
post形式与put形式
get形式与delete形式
get形式与delete的参数拼接形式
restful形式
注意：
使用方式
全局引用axios
axios网络请求的封装
封装方案
网络请求的跨域解决方案
js采取的是同源策略
非同源限制
解决跨域问题的方案
前台跨域解决案例
前端通过代理访问后端服务
后端服务
什么是axios
Axios（ajax input output system）是一个开源的可以用在浏览器端和node.js端的异步通信框架，他的主要作用是实现ajax异步通信
功能特点
- 从浏览器中创建xmlHttpRequests
- 从node.js中创建http请求
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换json数据
- 客户端支持防御xsrf（跨站请求伪造攻击）
注意：vue中封装了ajax并增强了他，在异步并发处理上要优于原生的ajax
请求类型
- post：新增操作
- put：修改操作
- get：查询操作
- delete：删除操作
定义axios前缀
写法：axios.defaults.baseURL="前缀名称"
结果：写了前缀之后，那么后面的axios请求路径就可以简写（去掉前缀）
axios的书写格式
axios({
url:"地址信息",
method:"请求方法",
params:{name:"lili"},
data:{name:"lili"}
}).then(res=>{
console.log(res.data)
})属性信息
- url：请求的路径
- method：请求方式
- params：请求参数
- data：请求参数
params和data的方式区别
params
- params的方式以name=value&name=value的格式发送请求参数，传送的参数为无格式对象
- 不管使用的请求方式是get还是post，请求参数都会被拼接到请求地址后
- 此种方式的数据可以直接获取参数
data
- data是以json串的方式发送请求参数
- 请求参数会被保存到请求报文的请求体中
- 此种方式获取的参数为json，需要你转化为java对象
- 此种方式只适用于put、post、patch方法（get方式没有请求体）
使用案例
使用前
安装axios：npm install --save axios
安装querystring：npm install --save querystring
组件中引入：
import axios from "axios"
import querystring from "querystring"
{{msg}}
注意：data里面的数据必须传递为json格式
axios简写形式
axios.请求方法("url地址信息"，参数信息)
.then(function(promise){console.log(promise.data)}) 注意：
- axios.请求方法("url地址信息"，参数信息)为一个promise对象，请求的结果被封装到data属性中
- 将"axios.请求方法("url地址信息"，参数信息)"函数返回值做为即将回调函数的参数，promise
简写形式实践
{{msg}}
针对不同请求类型的用法
post形式与put形式
axios.请求方法("url地址"，对象名称)
.then(function(promise){console.log(promise.data)}) get形式与delete形式
axios.请求方法("url地址"，{params：对象名称})
.then(function(promise){console.log(promise.data)}) 注意：对于{params：对象名称}参数浏览器会将里面的对象解析后再将参数自动拼接
get形式与delete的参数拼接形式
参数拼接url写法：http://localhost:8080/del?age=9&name=lili&hobby=篮球&hobby=足球
理解参数拼接：路径后面的属性由？隔开，多个属性之间用&连接
axios.请求方法("url地址带拼接参数")
.then(function(promise){console.log(promise.data)}) restful形式
restful形式的写法：http://localhost:8080/del/9/lili
restful形式理解：路径与参数值之间都用/拼接
注意：
- restful写法参数值在url内编辑
- 参数与参数之间用/分割
- restful分割数据位置有着严格的顺序（想想就知道）
- restful结构中，请求路径中不能出现动词，为了隐藏目的
- restful形式写法支持get/post/put/delete等请求方式
- restful形式的请求若为post/put，则后面的对象名称需要书写
使用方式
axios.请求方法("url地址信息restful形式",[对象名称])
.then(function(promise){console.log(promise.data)}) 全局引用axios
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入axios
import axios from "axios"
const app=createApp(App)
//将axios挂载到全局
app.config.globalProperties.$axios=axios
// 使用时直接this.$axios()来调用axios
app.mount('#app')axios网络请求的封装
前言：在日常应用过程中，一个项目中的网络请求会很多，此时一般采用的方案是将网络请求封装起来
封装方案
安装axios：npm install --save axios
安装querystring：npm install --save querystring
组件中引入：
import axios from axios
import querystring from "querystring"
import axios from "axios"
import querystring from "querystring"
const errorHandle=(status,info)=>{
switch(status){
case 400:
console.log("语义有误");
break
case 401:
console.log("服务器认证失败");
break
case 403:
console.log("服务器拒绝访问");
break
case 404:
console.log("地址错误");
break
case 500:
console.log("服务器遇到意外");
break
case 502:
console.log("服务器无响应");
break
default:
console.log(info);
break
}
}
/* 创建自己的网络请求对象 */
const instance=axios.create({
/* 网络请求的公共配置 */
timeout:5000
})
//拦截器常用
//发送数据之前
instance.interceptors.request.use(
//拦截成功执行的函数
//config包含网络请求的所有信息
config=>{
if(config.methods==="post"){
/* 转化post请求参数格式 */
config.data=querystring.stringify(config.data)
}
return config
},
//拦截失败执行的函数
error=>{
return Promise.reject(error)
}
)
//获取数据之前
instance.interceptors.response.use(
//成功时返回结果
response=>{
return response.status===200?Promise.resolve(response):Promise.reject(response)
},
//失败时返回结果
error=>{
const {response}=error
// 错误处理才是重中之重
errorHandle(response.status,response.info)
}
)
export default instance使用：直接把此导出的instance作为axios实例引入就直接使用
网络请求的跨域解决方案
js采取的是同源策略
同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名、端口、协议相同的数据接口上的数据，这就是同源策略
理解：当协议、域名、端口号任意一个不相同时，都会产生跨域问题
非同源限制
- 无法读取非同源网页的cookie、localStorage和IndexedDB
- 无法接触非同源网页的dom
- 无法向非同源地址发送ajax请求
解决跨域问题的方案
- 后台解决：cors
- 前台解决：proxy
前台跨域解决案例
前端通过代理访问后端服务
//vue.config.js文件内
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
/* 解决跨域问题的配置 */
devServer:{
//配置代理
proxy:{
"/randomPath":{
//参数为产生跨域的域名地址
target:"http://localhost:8888",
//设置true后，那么会在本地创建一个虚拟服务端（同域的），然后发送请求的数据并同时接收请求的数据，这样服务端和服务端进行数据交互就不会有跨域问题了
changeOrigin:true,
//路径重写
pathRewrite:{
//用来替换target中得到请求地址（前面为正则匹配）
//也就是你在请求target中的地址时直接写成/randomPath即可
'^/randomPath':''
}
}
}
}
})注意：前端解决完跨域之后，要记得重启服务器
后端服务
注意：后端端口号为8888提供服务，并且并没进行跨域配置
@RestController
@RequestMapping("/user")
public class GetMsg {
@GetMapping("/login")
public String doLogin(@RequestParam("username") String username,@RequestParam("password") String password){
System.out.println("请求进来了");
return "你的名字为"+username+"你的密码为"+password;
}
}