手写一个简易的 ajax
先解释 xhr.readyState
- 0-（未初始化）还没有调用 send() 方法
- 1-（载入）已调用 send() 方法，正在发送请求
- 2-（载入完成）send() 方法执行完成，已经接收到全部响应内容
- 3-（交互）正在解析响应内容
- 4-（完成）响应内容解析完成，可以在客户端调用
再解释 xhr.status
- 2xx- 表示成功处理请求，如 200
- 3xx- 需要重定向，浏览器直接跳转，如 301 302 304
- 4xx- 客户端请求错误，如 404 403
- 5xx- 服务器端错误
先准备一个数据：http://test.com//test/test.json
{
"name":"zhangsan"
}
get 请求演示：
const xhr = new XMLHttpRequest()
// get请求，true 表示异步
xhr.open('GET', '/test/test.json', true)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.status, JSON.parse(xhr.responseText))
//200 {name: "zhangsan"}
} else {
console.log(xhr.status, '其他情况')
// 404 "其他情况"
}
}
}
xhr.send(null)
post 请求演示：
const xhr = new XMLHttpRequest()
// post请求，无法演示，true 表示异步
xhr.open('POST', '/login', true)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.status, JSON.parse(xhr.responseText))
// 登录成功提示
} else {
console.log(xhr.status, '其他情况')
// 404 "其他情况"
}
}
}
const postData = {
username: 'zhangsan',
password: 'xxx'
}
//注意，需要把 json 转字符串
xhr.send(JSON.stringify(postData))
手写一个 ajax 函数，增加 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'))
}
}
}
xhr.send(null)
})
return p
}
const url = '/test/test.json'
ajax(url).then(res => {
console.log(res) // {name: "zhangsan"}
}).catch(err => {
console.log(err) // '404 not found'
})
实际项目中 ajax 的常用插件