axios介绍
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
首先需要知道:axios不是一种新的技术。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,有以下特点:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios在html中使用</title>
<!-- <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="btn">axios使用get提交数据</button>
<button id="btn1">axios使用post提交数据</button>
<button id="btn2">直接使用axios发送get提交数据</button>
<button id="btn3">直接使用axios发送post提交数据</button>
</body>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener("click",function (params) {
var url = "http://localhost:5000/save";
var paramsobj = {user:'zhangsan',pass:20};
axios.get(url,{params:paramsobj}).then(function (res) {
var data = res.data;
console.log(data);
});
});
document.querySelector("#btn1").addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/post";
var dataobj = {location:'zs',address:'zs'};
axios.post(url,{params:dataobj}).then(function (res) {
console.log(res.data);
});
})
document.querySelector("#btn2").addEventListener("click",function (params) {
var url = "http://www.liulongbin.top:3006/api/get";
var paramsdata = {name:'zss',age:20};
axios({
url:url,
method:'GET',
params:paramsdata
}).then(function (res) {
console.log(res.data);
});
});
document.querySelector("#btn3").addEventListener("click",function (params) {
var url = "http://localhost:5000/save";
var paramsdataa = {user:'zhangsan',pass:20};
axios({
url:url,
method:'POST',
data:paramsdataa
}).then(function (res) {
console.log(res.data);
});
});
</script>
</html>