Ajax详细概念介绍:Ajax请求的五个步骤_谁是听故事的人的博客-CSDN博客_ajax请求的五个步骤
一、初始的Ajax实例
其实Ajax就五大步:
- 创建XMLHttpRequest对象,即创建一个异步调用对象.
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
- 设置响应HTTP请求状态变化的函数.
- 发送HTTP请求.
- 获取异步调用返回的数据.
下面是实例:
// 创建XMLHttpRequest对象,即一个用于保存异步调用对象的变量
let xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("GET",url); // 创建http请求
xmlHttpRequest.onreadystatechange=function(){ // 设置响应http请求状态变化的事件
console.log('请求过程', xmlHttpRequest.readyState);
if(xmlHttpRequest.readyState == 4){ // 判断异步调用是否成功,若成功开始局部更新数据
console.log('状态码为', xmlHttpRequest.status);
if(xmlHttpRequest.status == 200) {
console.log(xmlHttpRequest .response); // 得到的请求的结果
} else { // 如果异步调用未成功,弹出警告框,并显示错误状态码
alert("error:HTTP状态码为:"+xmlHttpRequest.status);
}
}
}
xmlHttpRequest.send(); // 发送请求
二、利用promise封装Ajax
function getJSON(url){
return new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.onreadystatechange=handler;
xhr.responseType='json';
xhr.setRequestHeader('Accept','application/json');
xhr.send();
function handler(){
if (this.readyState == 4) {
if (this.status == 200) {
resolve(this.response);
}else{
reject(new Error(this.statusText))
}
}
}
})
}
这里的优越之处是可以利用promise的实例then、catch方法,便于对数据的处理
getJSON(url).then(function(posts) {
// 这里返回的posts就是请求返回的数据,可以在这进行处理
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
三、加入async封装Ajax
这里是采用是音乐播放器中的实例
const BASE_URL = `http://localhost:3000`;
console.log("ajax")
export default function Ajax({
//请求参数配置
method = "GET", //默认为'get'请求
url,
data = {},
}) {
return new Promise((resolve) => {
// 通过 Promise 返回异步请求
const xhr = new XMLHttpRequest();
xhr.open(method, BASE_URL + url);
xhr.onload = function () {
resolve(JSON.parse(xhr.response));
};
xhr.onerror = function () {
// 待最后进行错误处理操作
if (xhr.status == 0) {
}
};
xhr.send(JSON.stringify(data));
});
}
/**
* @description: 获得轮播图信息
* @param {*}
* @return {*}
*/
export async function getBannerList() {
const result = Ajax({
url: `/homepage/block/page`,
});
return result;
}
在调用时,只用利用await调用即可
const result =await getBannerList();
这时就直接获取了数据,再需要该数据时,直接引用即可。
这与前两种方法最大的区别是利用await的原理在模块其他模块调用时,更为方便,代码也更简洁。