前端学习七（前后端数据交互axios）
axios官网：http://www.axios-js.com/zh-cn/docs/index.html#axios-request-config-1
axios和ajax的区别：
1、理论区别；
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样；
ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有。
2、逻辑区别
ajax：ajax本身是针对MVC的编程；
axios：axios符合现在前端MVVM的浪潮。
promise介绍：
Promise是ES6新增的一种语法，是异步编程的一种解决方案。（旧方案是单纯的使用回调函数）
（1）从语法上说，promise是一种构造函数；
（2）从功能上说，promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。
Promise的三种状态：
pending（进行中，初始状态)
ulfilled（成功状态，也叫resolved)
rejected（失败状态）
async和await在axios中的作用：
async和await是ES2017中引入的关键字，用于异步编程。
async用于定义一个异步函数，await用于等待异步函数执行完成并返回结果。
在axios中，async和await通常用于处理异步请求，可以让代码更加简洁易读。
当我们使用async关键字定义一个异步函数时，函数内部的代码会自动转换成Promise对象，
而使用await关键字可以等待Promise对象的状态变为resolved后，再执行后续的代码。
一、axios请求和简写
一定要引入请求库aioxs
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入前端的请求库axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <script> // axios发送的是异步请求，返回的Promise是异步对象 const rsp = axios.get("http://127.0.0.1:5000/api/projects") // 可以通过回调函数获取response对象 rsp.then((result) => { console.log(result); }) // 简写 axios.get("http://127.0.0.1:5000/api/projects1").then((rsp) => { console.log(rsp); console.log(rsp.status); console.log(rsp.data); }).catch((error)=>{ // 响应码是3、4、5会走这个步骤 console.log(error); }) </script> </body> </html>
二、自定义状态码错误范围
<script> axios.get("http://127.0.0.1:5000/api/projects1", { validateStatus: function (status) { return status<500 } } ).then((rsp) => { console.log(rsp); console.log(rsp.status); console.log(rsp.data); }) // .catch((error) => { // // 响应码是3、4、5会走这个步骤 // console.log(error); // }) </script>
三、实例化请求对象
<script>
// 创建请求对象
const instance = axios.create({
baseURL: 'http://127.0.0.1:5000',
timeout: 1000,
// 添加请求头
headers: { 'X-Custom-Header': 'foobar' },
// 指定http状态码错误范围
validateStatus: function (status) {
return status < 500
}
});
// 进行请求
instance.get("/api/projects").then((rsp) => {
console.log(rsp);
console.log(rsp.status);
console.log(rsp.data);
})
</script>
四、get请求参数传递方式
<script>
// 创建请求对象
const instance = axios.create({
baseURL: 'http://127.0.0.1:5000',
timeout: 1000,
// 添加请求头
headers: { 'X-Custom-Header': 'foobar' },
// 指定http状态码错误范围
validateStatus: function (status) {
return true
}
});
// 参数传递方式1
instance.get("/api/interface?id=1001").then((rsp) => {
console.log(rsp.data);
})
// 参数传递方式2
instance.get("/api/interface", {
params: {
id: 1002
}
}).then((rsp) => {
console.log(rsp.data);
})
</script>
五、post请求参数传递方式（表单、json）
<script>
// 创建请求对象
const instance = axios.create({
baseURL: 'http://127.0.0.1:5000',
timeout: 1000,
// 添加请求头
headers: { 'X-Custom-Header': 'foobar' },
// 指定http状态码错误范围
validateStatus: function (status) {
return true
}
});
// 参数传递,json
instance.post("/api/user/login", {
user: "python01",
pwd: "lemonban"
}).then((rsp) => {
console.log('json传递的返回',rsp);
}).catch((err) => {
console.log(err);
});
// 参数传递,表单
// 先创建表单对象
const params = new URLSearchParams()
params.append("user", "python01")
params.append("pwd", "lemonban")
instance.post("/api/user/login", params).then((rsp) => {
console.log('表单传递的返回',rsp);
}).catch((err) => {
console.log(err);
});
</script>
六、axios结合async、await的使用
<script>
// 创建请求对象
const instance = axios.create({
baseURL: 'http://127.0.0.1:5000',
timeout: 1000,
// 添加请求头
headers: { 'X-Custom-Header': 'foobar' },
// 指定http状态码错误范围
validateStatus: function (status) {
return true
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 获取sessioStorage中的token，并添加到请求头或者请求体中
const token = window.sessionStorage.getItem("token")
if (token) {
config.headers.Mytoken = token
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// async和await结合axios使用
async function login() {
// 不加await会返回一个异步的对象；await只能在异步函数中使用
const rsp = await instance.post("/api/user/login", { user: "python01", pwd: "lemonban" })
console.log(rsp);
if (rsp.data.code == '1') {
const token = rsp.data.token;
console.log("获取token成功", token);
// 将token存储到sessioStorage（会话级别存储）
window.sessionStorage.setItem("token", token)
} else {
console.log("登录失败");
}
}
async function demo() {
const rsp = await instance.get("/api/interface?id=1001")
console.log("get请求", rsp);
}
login()
demo()
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
// 直接获取响应的data数据
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 验证是否真的拿的是data数据
demo()
</script>
七、练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style type="text/css"> body { background: url(lol.jpeg); } .box-card { width: 400px; margin: auto; margin-top: 200px; text-align: center; background-color: rgba(0, 0, 0, 20%); border: 0rem; } .el-input { padding: 8px; } </style> </head> <body> <div id="app"> <el-card class="box-card"> <h4>欢迎来到英雄联盟</h4> <el-input v-model="loginData.usr" placeholder="请输入账号"></el-input> <el-input v-model="loginData.pwd" placeholder="请输入密码" type="password"></el-input> <el-button type="primary" style="margin-top: 10px;" @click="login()">登录</el-button> </el-card> </div> <script type="text/javascript"> const instance = axios.create({ baseURL: 'http://127.0.0.1:5000', timeout: 1000, }); var vue = new Vue({ el: "#app", data: { loginData: { usr: "", pwd: "" } }, methods: { async login() { try { const rsp = await instance.post("/api/user/login", { user: this.loginData.usr, pwd: this.loginData.pwd }) } catch (e) { alert("网络异常") } console.log(rsp); if (rsp.data.code == '1') { const token = rsp.data.token; console.log("获取token成功", token); window.sessionStorage.setItem("token", token) } else { alert("登录失败") } } } }) </script> </body> </html>
一个只会点点点的测试，有疑问可以在测试群（群号：330405140）问我
浙公网安备 33010602011771号