获取调用和承诺链接的问题

Question

**edit: 后端有问题

所以我一直遇到链接承诺的问题。我放弃了 axios 并 async await 回去重新学习基础知识，因为我一定在某个地方犯了一个简单的错误，但我没有运气。希望有人可以看看吗？

我按以下顺序调用以下路由：

1. /users/register
2. /users/all
3. /delete/:id
4. /users/all

问题是代码应该添加一个用户，然后删除同一个用户，但我会说每 6 个左右调用 1 个，第 2 步和第 4 步（显示所有用户）都显示新添加的用户- 这是不正确的。

但据我所知，我正确地将承诺和调用链接在一起。

我一定遗漏了一些明显的东西，但我真的看不到它。如果我错在哪里，我会很感激第二双眼睛或方向

    function test() {
        fetch(`http://localhost:8080/users/register`, {        **//1**
            method: 'POST',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ firstName: 'nick', lastName: 'smith', phone: '01980635243', email: 'nick@hotmail.com', password: '1234567891011', confirmPassword:'1234567891011'})
        })
        .then(res => res.json())
        .then(res => {
            console.log(res);
            return fetch('http://localhost:8080/users/all')    **//2**
        })
        .then(res => res.json())
        .then(res => {
            console.log(res)
            return fetch('http://localhost:8080/users/delete-email/nick@hotmail.com', {  **//3**
                method: 'DELETE',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
        })
        .then(res => res.json()) 
        .then(res => {
            console.log(res)
            return fetch('http://localhost:8080/users/all');    **//4**
        })
        .then(res => res.json())
        .then(res => console.log(res))
        .catch(err => console.log(err));
    }

Answer 1

您可以退后一步，真正专注于学习基础知识。您应该知道fetch 是一个低级接口，按原样使用它是一个菜鸟之举。编程就是让你的生活更轻松。如果需要处理 JSON，让我们写一个 fetchJSON 特化 -

const fetchJson = (url, opts = {}) =>
  fetch(url, { ...opts, headers: 'Content-Type': 'application/json' })
    .then(r => r.json())

即使有我们的助手，我们也不应该直接使用它。通过定义可重用函数，我们的代码变得更具描述性和更易于使用 -

const userList = () =>
  fetchJson(`http://localhost:8080/users/all`)

创建userRegister 函数也很容易 -

const userRegister = (user = {}) =>
  fetchJson
    ( `http://localhost:8080/users/register`
    , { method: "POST", mode: "cors", body: JSON.stringify(user) }
    )

最后是userDelete -

const userDelete = email =>
  fetchJson
    ( `http://localhost:8080/users/delete-email/${email}`
    , { method: "DELETE", mode: "cors" }
    )

现在我们可以把它们放在一起

const test = () =>
  userRegister({
    firstName: 'nick',
    lastName: 'smith',
    phone: '01980635243',
    email: 'nick@hotmail.com',
    password: '1234567891011',
    confirmPassword:'1234567891011'
  })
  .then(user => {
    console.log("registered", user)
    return userList()
  })
  .then(users => {
    console.log("list", users)
    return userDelete("nick@hotmail.com")
  })
  .then(_ =>
    console.log("user deleted")
    return userList()
  })

请注意，我们不会将任何 .catch 附加到 test。这留给调用者决定。我们可以这样运行测试 -

test().then(console.log, console.error)

不要停在那里

你看到.then(something => { console.log(something), ... })的模式了吗？我们可以制作一个通用的 log 函数，让这个意图更加清晰 -

const log = label => data =>
{ console.log(label, data)
  return data
}

const test = () =>
  userRegister({
    firstName: 'nick',
    lastName: 'smith',
    phone: '01980635243',
    email: 'nick@hotmail.com',
    password: '1234567891011',
    confirmPassword:'1234567891011'
  })
  .then(log("registered"))
  .then(_ => userList())
  .then(log("list"))
  .then(_ => userDelete("nick@hotmail.com"))
  .then(log("user deleted"))
  .then(_ => userList())

但是这里有一个不好的做法。 console.log 是一个副作用，如果我们能从 test 中得到 each 承诺的结果，那就太好了。我们可以清楚地看到_ => ... 正在替换 链中前一个promise 的值，并且只有final 的promise 值可供调用者使用。

您可以将所有结果附加到一个数组中，并将该数组线程化到每个连续的promise，但这也相当乏味。这尤其是在 async 和 await 很有帮助的地方，因为它们使承诺值在同一范围内可用 -

async function test()
{ const user = await userRegister({
    firstName: 'nick',
    lastName: 'smith',
    phone: '01980635243',
    email: 'nick@hotmail.com',
    password: '1234567891011',
    confirmPassword:'1234567891011'
  })

  const list1 = await userList()

  const delete = await userDelete("nick@hotmail.com")

  const list2 = await userList()

  return [user, list1, deleted, list2] // <- all results
}

现在console.log 已与test 分离，所有承诺值的结果可供调用者使用

test().then(console.log, console.error)