原生axjax 和axio的结合使用
固定请求地址和方法
<body>
<script>
/*
1. 新闻接口
get http://ajax-api.itheima.net/api/news
无参数
*/
function myAxios() {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
// 2.在请求行中设置请求的 地址 和方法
xhr.open("get", "http://ajax-api.itheima.net/api/settings");
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
});
// 4.在请求体里面发送请求
xhr.send();
});
}
myAxios().then((res) => {
console.log(res);
});
</script>
axios参数的提取
<body>
<script>
/*
1. 新闻接口
get http://ajax-api.itheima.net/api/news
无参数
参数是一个对象
url 地址+get的参数(如果有的话)
method
目前只考虑get
*/
function myAxios(option) {
return new Promise((resolve, reject) => {
// method = "get" get可以默认不传
const { method = "get", url } = option;
const xhr = new XMLHttpRequest();
// 2.在请求行中设置请求的 地址 和方法
xhr.open(method, url);
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
// console.log(xhr.response);
resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
});
// 4.在请求体里面发送请求
xhr.send();
});
}
myAxios({
method: "get",
url: "http://ajax-api.itheima.net/api/settings",
}).then((res) => {
console.log(res);
});
</script>
</body>
axios传递json给服务器
<body>
<h2>axios传递json给服务器</h2>
<button class="get">获取图书</button>
<button class="add">新增图书</button>
<button class="edit">修改图书</button>
<button class="delete">删除图书</button>
<script>
/*
参数是一个对象
url 地址+get的参数(如果有的话)
method
data:{} 通过请求体传递的数据 写到这里.对象的格式
*/
function myAxios(option) {
return new Promise((resolve, reject) => {
// method = "get" get可以默认不传
const { method = "get", url, data } = option;
const xhr = new XMLHttpRequest();
// 2.在请求行中设置请求的 地址 和方法
xhr.open(method, url);
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.setRequestHeader("content-type", "application/json");
xhr.addEventListener("load", function () {
// response 响应
// console.log(xhr.response);
resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve
});
// 4.在请求体里面发送请求
xhr.send(JSON.stringify(data));
});
}
myAxios({
method: "post",
url: "http://ajax-api.itheima.net/api/login",
data: {
username: "admin",
password: "123456",
},
}).then((res) => {
console.log(res);
});
//
document.querySelector(".get").onclick = () => {
myAxios({
method: "get",
url: "http://ajax-api.itheima.net/api/books",
}).then((res) => {
console.log(res);
});
};
//
document.querySelector(".add").onclick = () => {
myAxios({
method: "post",
url: "http://ajax-api.itheima.net/api/books",
data: {
bookname: "H哈哈哈",
author: "aa",
publisher: "dd",
},
}).then((res) => {
console.log(res);
});
};
//
document.querySelector(".edit").onclick = () => {
myAxios({
method: "put",
url: "http://ajax-api.itheima.net/api/books/2114",
data: {
bookname: "H哈哈哈qqqq",
author: "aa",
publisher: "dd",
},
}).then((res) => {
console.log(res);
});
};
//
document.querySelector(".delete").onclick = () => {
myAxios({
method: "delete",
url: "http://ajax-api.itheima.net/api/books/2114",
}).then((res) => {
console.log(res);
alert("已删除");
});
};
</script>
</body>
