强大的promise
这个玩意叫做普罗米修斯，希腊神话的盗火英雄
promise只用来包装异步函数，同步的会搞乱执行顺序，生产BUG
// 如何使用
function pro(){
return new Promise(function(resolve,reject){
setTimeout(function(){
var num = parInt(Math.random()*10)；
if(num>5){
resolve(num)
// 这个可以写成
// return Promise.resolve(num)
}else{
reject(num)
// 这个可以写成
// return Promise.reject(num)
}
},5000)
})
}
// pro()这个返回的是一个pending的Promise对象
// Promise可以被then启动，参数有两个，跟new的时候对应也是两个
// new的时候第一个参数传递成功，then的时候第一个参数接受成功
// new的时候第二个参数传递失败，then的时候第二个参数接受失败
pro().then((res)=>{ ... },(error)=>{ ... })
这个api是有固定写法的，用来把回调的异步函数转成链式的异步函数
先看看传统的回调型异步函数
function ajax1(){
ajax({
sucess:function(res1){
//回调ajax2，或者直接把第二个ajax写在这里面
ajax2(res1)
}
})
}
function ajax2(res1){
ajax({
sucess:function(res2){
...
}
})
}
ajax1()
Promise写法
function ajax1(){
return new Promise((resolve,reject)=>{
ajax({
sucess:function(res1){
//回调ajax2，或者直接把第二个ajax写在这里面
resolve(res1)
}
})
}
}
function ajax2(){
return new Promise((resolve,reject)=>{
ajax({
sucess:function(res2){
//回调ajax2，或者直接把第二个ajax写在这里面
resolve(res2)
}
})
}
}
ajax1().then((res1)=>{
return ajax2(res1)
}).then((res2)=>{
...
})
promise.resolve
let res = Promise.resolve("123")
res.then(res=>{ console.log(res) })
promise.reject
let res = Promise.reject("123")
res.then(res=>{ console.log(res) })
Promise.all
这个使用在几个异步函数需要同时请求但是相互不关联的情况
常用来作为初始化加载使用
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
}，(error)=> {
console.log(error)
});
// 如果上面几个promise函数没有全部返回成功，就会指向error
看了上面的写法觉得也不过如此是吧，有没有改变，代码还变多了，我也是这么觉得的，直到看到Promise配合async使用
async
这个是Generator函数的语法糖
什么是语法糖，就是更简易的使用，二次封装
什么是Generator函数，这个是es6的api，还没被人知道就被他的语法糖async给抢了头条，所以不管，知道语法糖async怎么用就行
任何函数都可以在前面加上单词async把函数升级成异步管理函数
async只能在该函数的作用域里使用,如果是函数里的函数就得再写一次async了
async要跟await配合使用，否则没有存在意义
await要连接一个promise函数，primise要是一个异步函数
这几个点不遵守肯定会有一些执行顺序等等的BUG
function ajax1(){
return new Promise((resolve,reject)=>{
ajax({
sucess:function(res1){
//回调ajax2，或者直接把第二个ajax写在这里面
resolve(res1)
}
})
}
}
function ajax2(opt){
return new Promise((resolve,reject)=>{
ajax({
sucess:function(res2){
//回调ajax2，或者直接把第二个ajax写在这里面
resolve(res2)
}
})
}
}
async function init(){
var res1 = await ajax1()
var opt = res1 + 1; //模拟正常的方法什么的
var res2 = await ajax2(opt)
}
init()
上面的代码如果是同步代码我们是很好理解的，但是因为是异步的，就不好理解了，正常来说因为ajax1和ajax2是异步的，res1和res2只会拿到undefined，这种运行顺序根本巅峰了对异步的理解，你确定这样的代码执行下来没问题？
有没有问题可以自己试试
async错误处理
// 统一处理
async function init(){
try{
var aa = await A()
var bb = await B()
}catch(err) {
console.log(err)
}
}
// 单独处理
async function init(){
const [err, data] = await A().then(data => [null, data]).catch(err => [err, null])
const [err, data] = await B().then(data => [null, data]).catch(err => [err, null])
}
// 上面的优化写法
// 抽离成公共方法
const awaitWrap = (promise) => {
return promise
.then(data => [null, data])
.catch(err => [err, null])
}
async function init(){
const [err, data] = await awaitWrap(A())
const [err, data] = await awaitWrap(B())
}
如何理解async呢
我们可以认为await阻塞了线程，如果有了解过java，在java里有个yeild的方法，这个方法就是await的语法糖，这个API让异步变成了同步，让代码更加的好理解
做一个网络测速
网络测速的前提是服务器超大的带宽
原理是让前端递归去获取服务器的图片获得下载的网速，再把图片转base64递归上传获得上传的网速，我做了五个实验
第一个
var index = 10;
function yi() {
var start = new Date().getTime()
var img = document.createElement("img");
var num = Math.random()
img.src = './img/xxx.png?num=' + num;
img.onload = function (res){
var end = new Date().getTime()
console.log("递归----"+(end-start))
index--;
if(index!=0){
yi()
}
}
}
yi()
第二个
var index = 10;
var promiseArr = [];
function getImg() {
return new Promise(function (resolve, reject) {
var start = new Date().getTime()
var img = document.createElement("img");
var num = Math.random()
img.src = './img/girs.png?num=' + num;
img.onload = function (res){
var end = new Date().getTime()
console.log("Promise.all----"+(end-start))
resolve(end-start);
}
})
}
function er() {
for(var i=0;i<10;i++){
promiseArr.push(getImg())
}
Promise.all(promiseArr).then()
}
er()
第三个
function getImg() {
return new Promise(function (resolve, reject) {
var start = new Date().getTime()
var img = document.createElement("img");
var num = Math.random()
img.src = './img/girs.png?num=' + num;
img.onload = function (res){
var end = new Date().getTime()
console.log("10次await-----"+(end-start))
resolve(end-start);
}
})
}
async function san() {
var allTime = 0;
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
allTime += await getImg();
}
san()
第四个
function getImg() {
return new Promise(function (resolve, reject) {
var start = new Date().getTime()
var img = document.createElement("img");
var num = Math.random()
img.src = './img/girs.png?num=' + num;
img.onload = function (res){
var end = new Date().getTime()
console.log("for(x){await x}-----"+(end-start))
resolve(end-start);
}
})
}
async function si() {
var arr = []
for(var i=0;i<10;i++){
arr.push(getImg())
}
for (const x of arr){
await x;
}
}
si()
第五个
function getImg() {
return new Promise(function (resolve, reject) {
var start = new Date().getTime()
var img = document.createElement("img");
var num = Math.random()
img.src = './img/girs.png?num=' + num;
img.onload = function (res){
var end = new Date().getTime()
console.log("for await(x){x}+-----"+(end-start))
resolve(end-start);
}
})
}
async function wu() {
var arr = []
for (var i=0;i<10;i++){
arr.push(getImg())
}
for await(const x of arr){
x;
}
}
wu()
这五个代码的执行时间都不一样，为什么还得研究
封装一个promise版本的ajax
function ajax(url, method = 'get', param = {}) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const paramString = getStringParam(param);
if (method === 'get' && paramString) {
url.indexOf('?') > -1 ? url += paramString : url += `?${paramString}`
}
xhr.open(method, url);
xhr.onload = function () {
const result = {
status: xhr.status,
statusText: xhr.statusText,
headers: xhr.getAllResponseHeaders(),
data: xhr.response || xhr.responseText
}
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
resolve(result);
} else {
reject(result);
}
}
// 设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 跨域携带cookie
xhr.withCredentials = true;
// 错误处理
xhr.onerror = function () {
reject(new TypeError('请求出错'));
}
xhr.timeout = function () {
reject(new TypeError('请求超时'));
}
xhr.onabort = function () {
reject(new TypeError('请求被终止'));
}
if (method === 'post') {
xhr.send(paramString);
} else {
xhr.send();
}
})
}
function getStringParam(param) {
let dataString = '';
for (const key in param) {
dataString += `${key}=${param[key]}&`
}
return dataString;
}
