axios 网络请求库
使用 get 或post 方法即可发送请求。(常用)
then 方法中的回调函数会再请求成功或失败是触发 ，回调函数形参可获取返回信息。
官网：GitHub - axios/axios: Promise based HTTP client for the browser and node.js
注：axios 回调函数中this已经改变，无法访问到data数据；
将this保存，回调函数中直接使用保存的this即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Axios</title>
<script src="../lib/vue.js"></script>
<!--axios 导包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="btnGet">Get</button>
<button id="btnPost">Post</button>
<br>
<label id="labText"></label>
<script>
document.querySelector("#btnGet").addEventListener('click',async function(){
var url = 'http://127.0.0.1:8080/API/get';
var param = {param:{}};
//如果 调用某个方法的返回值时 'Promise' 实例，前面可以添加 await
//await 只能用于被 'async' 修饰的方法中
//await表达式会暂停当前 async function的执行，等待Promise处理完成。 如果await的promise失败了，就会抛出异常，需要通过try–catch来捕获处理。
var {data} = await axios.get(url,param);
console.log(data);
document.querySelector("#labText").innerHTML = data; //Get 请求成功！[object Object]
});
document.querySelector("#btnPost").addEventListener('click',async function(){
var url = 'http://127.0.0.1:8080/API/post';
var param = {param:{}};
var {data} = await axios.post(url,param);
console.log(data);
document.querySelector("#labText").innerHTML = data; //POST 请求成功！[object Object]
});
</script>
</body>
</html>
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
