了解 Promise
Promise 很好的解决了异步操作的时候回调地狱的问题, 让你轻松的写出下面的代码；
fetchData().then((res) => {
// do something
}).catch(e => {
// deal with error
})
可以看出这是一个链式调用。 调用的起点是 fetchData()， 我们假设这个方法调用就表示一个异步操作，
js里面异步操作最多的可能就是 ajax 请求了， 以ajax请求为例， 从发出请求到接收到请求， 都会经历一段时间。fetchData 其实隐藏了很多东西， 但是我们大体可以看出这种逻辑 => 经过方法之后肯定返回了某个东西， 如果返回的是我们想要的比如 ajax请求成功了， 我们拿到了数据， 那就走 then 方法， 如果没有那就走 catch 方法， 对于 es7 来说还可以添加一个 finally 方法， 表示异步调用无论成功还是失败都会走的方法， 很有 try catch finally 的味道。
let p = new Promise((resolve, reject) => {
// do something
})
promise实例 p 表示一个异步执行的结果, 在新建一个promise 对象的时候， 接收一个函数， 在该函数内部你可以操作异步的具体逻辑；
下面的例子用 setTimeout 模拟了一个异步调用。
这里的 resolve reject 跟最终 promise实例的 then catch 方法其实是一对， 如果调用了 resolve 方法就会走 then 调用了 reject 就会走 catch；
function getData(timer) {
return new Promise((resolve, reject) => {
setTimeout(() => {
let tail = String(new Date().getTime()).substr(-7)
if (timer >= 5) {
reject({
status: 'fail',
timer,
tail
});
} else {
resolve({
status: 'ok',
timer,
tail
})
}
}, timer * 10)
})
};
getData(4).then(sv => {
console.log(sv)
return getData(++sv.timer)
}).then(sv => {
console.log(sv)
return getData(++sv.timer)
}).catch(err => {
console.error(err)
})
Promise.all([
getData(1),
getData(2),
getData(6)
]).then(sv => {
console.log(sv)
return sv;
}).catch(fv => {
console.log(fv)
})
用 Promise 封装 Ajax (简陋版本, 不考虑 IE 的兼容性)
function axin(ar) {
const BASEURL = ar.baseUrl || window.location.host + window.location.pathname;
return new Promise((resolve, reject) => {
// 实例化一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 绑定 xhr.readyState 改变时候的回调
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
console.log("请求成功")
} else {
reject(xhr);
console.error("请求错误")
}
}
};
// 初始化请求
xhr.open(ar.methods, BASEURL + ar.url);
// 设置请求头 (可选)
xhr.setReauestHeaders("Accept", "*/*")
// 发出请求
xhr.send(null);
});
}
// xhr.readyState 的值代表了 xhr 对象所处的状态
// xhr.status 代表的是服务器响应的http 的状态码 具体的状态码代表的信息请参见 MDN
// xhr.responseText 代表的是服务器响应的内容
// xhr.open(method, url, async, user, password)
// xhr 的 open 方法, 用于初始化一个请求， 接受 5 个参数后三个可选
// method: http 方法比如 get, post, delete, put
// url: 请求的路径
// async: 是否是异步的 后面两个代表用户以及密码
// xhr.setRequestHeaders 用于设置请求头， 需要注意的是该方法只能用在 open 方法之后， 并且是在 send 之前， 否则抛出错误 方法接受俩参数 header: 请求头的名字 value 请求头的值
// xhr.send() 用于发出请求 get 或者是 head 方法的时候参数不填或者填 null
axin({
methods: "get",
baseUrl: "https://api.myjson.com/",
url: "bins/bmzjk"
})
.then(res => {
console.log(res);
})
.catch(e => {
console.error(e);
});
// -----------------------------------------------------
// HTML5 将 XMLHttpReauest纳入了规范并且增加了一些新的内容
// 1 - 设置请求的超时时间
// 2 - 通过 FormData 发送表单数据
// 3 - 上传文件
// 4 - 支持跨域请求
// 5 - 获取服务器的二进制数据
// 6 - 获取数据传递的进度信息
// xhr.timeout
// 跟 xhr.setRequestHeader 一样 只能在 xhr.open 之后 xhr.send 之后设置 数值类型 单位是毫秒
// 发送表单数据
// FormData 用于模拟表单
let xhr_formdata = new XMLHttpRequest();
// --------- 省略监听状态的代码 ---------------
let fomData = new FromData();
// 向表单添加数据
fomData.append("userName", "zhu");
fomData.append("userAge", 12);
xhr.open("POST", "/api/form");
xhr.send(formData);
