js promise 封装异步方法

Question

const foo = str => {
  const len = str.length
  setTimeout(() => {
    bar({
      str,
      len
    })
  }, len * Math.random())
}

const barz = string => new Promise(resolve => {
// 代码开始
  foo(string)
  global.bar = // 该怎么写
// 代码结束
})

barz('12345').then(o => console.log(o.len)) // 5
barz('123').then(o => console.log(o.len)) // 3
barz('123456').then(o => console.log(o.len)) // 6

已知 foo 方法，输入字符串，一段时间后会调用 bar 方法
现在要写一个 barz 方法，把 foo 封装成一个 promise

对应的输入有对应的返回，但是代码该如何写呢？
如何用 promise 的方式正确 handle 对应的 bar？

Answer 1

const barz = string => new Promise(resolve => {
  if (window.arr === undefined) window.arr = []
  arr.push({
    resolve,
    string
  })
  foo(string)
  bar = ({str, len}) => {
    const index = arr.map(o => o.string).indexOf(str)
    arr[index].resolve({str, len})
  }
})

这样来订阅。。。

Answer 2

如果我没理解错的话，你的意思应该是把 foo 封装成能返回 Promise 的吧？那就是让 bar 去 resolve 就行了：

const foo = str => {
  const len = str.length
  setTimeout(() => {
    bar({
      str,
      len
    })
  }, len * 100)
}

const barz = str => new Promise(resolve => {
  // 先把旧 bar 保存下来
  // (代码可能不一定拿来就能跑，请自行细调)
  const __oldbar = global.bar;

  // 重新定义一个 bar，里面先 call 旧的 bar，再 resolve
  // 这里如果对 this 绑定有要求，请自行调整
  global.bar = function (result) {
    __oldbar(result);
    resolve(result);
  };

  foo(str);
})

barz('12345').then(o => console.log(o.len)) // 5
barz('123').then(o => console.log(o.len)) // 3
barz('123456').then(o => console.log(o.len)) // 6

Answer 3

const foo = str => {
    const len = str.length;
    setTimeout(() => {
        bar({ str, len });
    }, len * Math.random());
};
const barz = string => {
    return new Promise(resolve => {
        foo(string);
        global.bar = resolve;
    });
};
barz('12345').then(o => console.log(o.len));
barz('123').then(o => console.log(o.len));
barz('123456').then(o => console.log(o.len));