前端 手写ajax

ajax是日常开发最常用的，写两种，最简易版和promise版
注意 xhr.readyState 和 xhr.status 的取值
具体可以去文档查看
https://www.w3cschool.cn/ajax/

最简易版

function ajax(url, callback) {
	// 不考虑IE6
	const xhr = new XMLHttpRequest()
	xhr.open('Get', url, true)
	/*规定请求的类型、URL 以及是否异步处理请求。
		method：请求的类型；GET 或 POST
		url：文件在服务器上的位置
		async：true（异步）或 false（同步）
	*/
	xhr.onreadystatechange = function(){
		if (xhr.readyState === 4) {
			/** 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
				0: 请求未初始化
				1: 服务器连接已建立
				2: 请求已接收
				3: 请求处理中
				4: 请求已完成，且响应已就绪 
			**/
			if (xhr.status === 200) {
				callback(xhr.responseText)
			} else {
				// 其他各种情况，这里只简写
				console.log(xhr.status)
			}
		}
	}
	xhr.send(null)
}

promise版

function ajax(url){
	const p = new Promise((resolve, reject) => {
		const xhr = new XMLHttpRequest()
		xhr.open('Get', url, true)
		xhr.onreadyStateChange = function(){
			if (xhr.readyState === 4) {
				if (xhr.status === 200) {
					resolve(JSON.parse(xhr.responseText))
				} else if (xhr.status === 404) {
					reject(new Error('404 not found'))
				}
				// 这里状态码404 仅举一个失败的例子
			}
		}
		xhr.send(null)
	})
	return p
}
// 调用
const url = 'data.json'
ajax(url).then(res => console.log(res))
		 .catch(err => console.log(err))