目录
什么是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=>{
<!--结果被封装到promise的data中-->
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"
<template>
<div id="a">
{
{msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
name:"mycomponent",
data() {
return {
msg:""
}
},
mounted() {
// get请求方式
axios({
method:"get",
url:"https://limestart.cn/"
}).then(res =>{
console.log(res.data);
this.msg=res.data
})
// post请求参数
axios({
method:"post",
url:"http://iwenwiki.com/api/blueberrypai/login.php",
data:querystring.stringify({
user_id:"[email protected]",
password:"iwen123",
verification_code:"crfvw"
})
}).then(res=>{
console.log(res.data);
})
},
}
</script>注意：data里面的数据必须传递为json格式
axios简写形式
axios.请求方法("url地址信息"，参数信息)
.then(function(promise){console.log(promise.data)}) 注意：
- axios.请求方法("url地址信息"，参数信息)为一个promise对象，请求的结果被封装到data属性中
- 将"axios.请求方法("url地址信息"，参数信息)"函数返回值做为即将回调函数的参数，promise
简写形式实践
<template>
<div id="a">
{
{msg}}
</div>
</template>
<script>
import axios from "axios"
import querystring from "querystring"
export default{
name:"mycomponent",
data() {
return {
msg:""
}
},
mounted() {
// get请求方式
axios.get("https://limestart.cn/")
.then(res=>{
console.log(res.data);
})
// post请求参数
axios.post("http://iwenwiki.com/api/blueberrypai/login.php",querystring.stringify({
user_id:"[email protected]",
password:"iwen123",
verification_code:"crfvw"
})).then(res=>{
console.log(res.data);
})
},
}
</script>针对不同请求类型的用法
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
前台跨域解决案例
前端通过代理访问后端服务
<template>
<div id="container">
<button @click="send">点击调用</button>
</div>
</template>
<script>
export default {
name:"app",
methods: {
send() {
//这里的开头用代理（我全局配置了axios）
this.$axios.get("/randomPath/user/login?username=lili&password=123").then(
function(promise) {
console.log(promise.data);
})
}
}
}
</script>//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;
}
}