在Promise.then取值并返回

PS 使用React框架、antdUI中的Table

有这个需求是因为昨天后台男友多给了我一个角色权限分类的接口，导致之前写死的角色权限不能再用了，得使用这个分类接口，之前的分类的代码大概长这样。

{
  title: "性别",
  width: '10%',
  dataIndex: "gender",
  render: (gender) => {
    if (gender === 1) {
      return '男'
    } else if (gender === 2) {
      return '女'
    } else {
      return '未知'
    }
  }
},

一开始我的想法是，在render中调用一个函数，这个函数根据传过来的roleId返回roleName，如果此时我的后台男友能在接口里加个根据id查询name的功能就没有下面这么多屁事了，但我依然想靠自己完成这个功能（倔强脸。

于是我哼哧哼哧写了个函数，想通过这个函数return给我roleName。

 getRoleList = async (roleId) => {
    let result = ''
    let res = await reqGetRoleList()
    console.log(res)
    for (let value of res.data.data) {
      if (value.roleId === roleId) {
        result = value.roleName
      }
    }
    return result 
  }

{
  title: "角色名",
  dataIndex: "roleId",
  width: '10%',
  render: (roleId) => {
    return this.getRoleList(roleId)
  }
},

我的想法很简单也非常天真，我以为这样就可以获得我想要的值，可是页面一直没有渲染出数据。

花了很长的时间，完全搞不清楚getRoleList中return出来的是什么，几经波折，我终于察觉到了，它return的是一个Promise。

而这个Promise中有个[[PromiseValue]]的东东，这个东东里是我想要的角色名字符串。

在网上查询以后我发现这东西只能在.then中才能打印出来，我仿佛进入了一个死循环，就像这位兄弟所说的。

的确, promise对象似乎无法取出里面的值.

promise的链式调用, 表明它返回的依然是一个promise对象.

即使用 async 来包装, async函数本身返回的就是一个promise对象, 依然没用.

似乎绕来绕去, value值永远在promise对象的肚子里, 出不来

作者：寒夜天
链接：https://www.zhihu.com/question/274196779/answer/488159747
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

此路不通就让我再想想，我又哼哧哼哧写了一个函数，这次我是用this.setState存放返回给我的列表信息。

getRoleList = async () => {
  // console.log('进来了getRoleList', roleId);
  let res = await reqGetRoleList()
  console.log(res)
  this.setState({
    roleList: res.data.data
  })
}

但是这次我把return的需求放到了另外的函数里，而这个函数不再return Promise对象了，它给我的终于是roleName的字符串了！！

getRoleName = (roleId) => {
  let result = ''
  for (let value of this.state.roleList) {
    if (value.roleId === roleId) {
      result = value.roleName
      console.log('result', result);
    }
  }
  return result
}

那么渲染的地方就很简单了

{
  title: "角色名",
  dataIndex: "roleId",
  width: '10%',
  render: (roleId) => {
    return this.getRoleName(roleId)
  }
},

其实思路本身挺简单的，只是我被Promise给困住了，老是想直接从Promise中return出来这个字符串。这个问题花了挺长时间的，怀疑过是不是作用域出错了为什么return不出来结果，一度把程序搞成了死循环，还跟后台男友闹了别扭。喏，现在不用他给我提供查询方法我也能自己做出来了惹。