如何为useAsync钩子接收的异步函数新增Token作为额外参数

解决方案 #

你不需要用bind也可以实现需求，直接在获取到token后，将token作为参数传递给你传入的异步函数即可，同时可以兼容调用execute时传入的自定义参数，顺便修复原代码中的拼写错误、未闭合括号等问题：

改造后的useAsync钩子

const useAsync = (asyncFunction, immediate = true) => {
  // 用async/await简化嵌套then逻辑，同时透传execute调用时传入的所有参数
  const execute = useCallback(async (...args) => {
    const token = await getAccessToken();
    // 把token作为第一个参数传入异步函数，后面拼接execute收到的其他自定义参数
    const response = await asyncFunction(token, ...args);
    console.log('SUCCESS', response);
    return response;
  }, [asyncFunction]);

  // 如果你需要保留原钩子的immediate自动执行逻辑，在这里补对应useEffect即可
  return { execute };
}

业务端调用代码调整

你传入useAsync的异步函数需要接收token作为第一个参数：

const Component = () => {
  // 第一个参数接收useAsync自动注入的token
  const getFile = async (token) => {
    // 可自行把token添加到请求头、payload等位置
    const payload = { fileId, token };
    return getFileInfo(payload);
  };

  const { execute  } = useAsync(getFile, false);
  useEffect(() => {execute()}, []);
}

可选：如果要保持原异步函数参数顺序，把token放在最后 #

只需要修改useAsync中调用异步函数的参数顺序即可，业务端无需调整原有参数：

// token作为最后一个参数传入
const response = await asyncFunction(...args, token);

bind写法的实现方案 #

如果要使用bind实现，正确写法如下，之前未实现成功大概率是没有执行bind返回的新函数，或者参数顺序错误：

const useAsync = (asyncFunction, immediate = true) => {
  const execute = useCallback(() => {
    return getAccessToken().then((token) => { 
      // bind第一个参数是this指向，后面的是预绑定的参数，最后加()执行新函数
      return asyncFunction.bind(null, token)()
        .then((response) => {
          console.log('SUCCESS', response)
        })
    })
  }, [asyncFunction]);

  return { execute };
}

内容的提问来源于stack exchange，提问作者Scott