构建Promise队列实现异步函数顺序执行精读《用 Reduce 实现 Promise 串行执行》 promise串行的几种方法

场景， a、b和c三个任务，顺序执行，后续函数依赖前面函数的处理结果这时候考虑把Promise数组变成队列运行，先进先出先定义一个promise生成器


const generatePromise = (name, time) => (data = []) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
  console.log(`promise ${name} resolved`)
  data.push(name)
  resolve(data);
}, time)
})
}``

首先我们可能会这样执行，通过重复调用往里面塞值

generatePromise('promiseA', 3000)([])
  .then(generatePromise('promiseB', 2000))
  .then(generatePromise('promiseC', 1000))
  .then(data => {
    console.log(data)
  })

虽然能完成工作，但是不够优雅

// forEach版本
function queue(arr) {
  let sequence = Promise.resolve();
  arr.forEach(item => {
    sequence = sequence.then(item)
  })
  return sequence
};

// reduce版本
function queue(arr) {
  return arr.reduce((prev, next) => prev.then((data) => next(data))
    , Promise.resolve())
}

// async 版本
async function queue(arr) {
  let res = [];
  for (let promise of arr) {
    res = await promise(res)
  }
  return res;
}

//调用
generatePromise('promiseA', 3000)([])
  .then(generatePromise('promiseB', 2000))
  .then(generatePromise('promiseC', 1000))
  .then(data => {
    console.log(data)
  })

// 执行结果
promise promiseA resolved
promise promiseB resolved
promise promiseC resolved
["promiseA", "promiseB", "promiseC"]

URL中的# http://www.httpwatch.com/features.htm#print

表示了网页中的一个位置，

在url出现的#号，浏览器会匹配页面中是否有出现此id，然后会滚动到指定可视区域的顶部。 http请求会忽略#号后面

后面都会被浏览器当作位置符

修改#不会导致页面重新加载 javascript可以通过window.location.hash 来读取或改变# 谷歌的网络蜘蛛会忽略#后面的内容解决方案 hash bang 只要将＃改成#!即可，实现大致为：当网络蜘蛛遇到#!时候，会自动将#!identifier转成_escapedfragment=identifier形式的参数。但是：

将#改成!#告诉网络蜘蛛：我们支持这个解决方案：hash bang 相应的，我们的应用也需要具备相应的支持能力，对于网络蜘蛛带escaped_fragment=casper的GET请求，需要能够提供相应的网页内容

onhashchange 通过此事件监听路由变化
```
// 使用方法
window.onhashchange = func;
```

window.addEventListener("hashchange", func, false); ``` - 题外话我们知道现在流行的spa应用就是不刷新页面，仅通过监听页面#后面的地址的变化来加载不同的js构建页面，然后发送ajax请求获取不同数据。 vue-router 中的hash模式就是上述的原理，监听hash变化，然后加载不通过script，script去构建不同的页面

cjfff / issue-blog

2018-11-8 Promise队列机制，url中 # 符号的作用 #5

表示了网页中的一个位置，

后面都会被浏览器当作位置符