Question

我刚刚从学习Java转到学习Javascript，现在我正在尝试学习React和Redux。我对在YouTube上关注的本教程中的对象看起来是如何创建的感到有些困惑。到目前为止，此教程仅介绍了登录和登录网页。

api.js

import axios from "axios";

export default {
  user: {
    login: credentials =>
      axios.post("/api/auth", { credentials }).then(res => res.data.user),
    signup: user =>
      axios.post("/api/users", { user }).then(res => res.data.user),
    confirm: token =>
      axios.post("/api/auth/confirmation", { token }).then(res => res.data.user)
  }
};

这是我目前从这段代码中了解的内容：导入axios，以便发出各种HTTP请求。创建一个user对象，该对象包含3个对象（函数？）的数组：login，signup和confirm。在login对象中，箭头函数用于将credentials作为参数传递到axios对象的post函数中。然后在响应数据传递到???的地方调用Promise。返回res.data.user对象。

我不了解res.data.user对象是什么，为什么用点分隔而不是responseDataObject这样的形式来描述它呢？

下一段代码是导入api.js的应用程序（Redux）的“操作”部分。在这里，其中两个功能被导出到一个新功能中，该新功能取决于用户的状态。...我认为其他部分无关，因为我了解编程逻辑。我不明白的是res.data.object这样返回的方式和原因。 data部分来自哪里？是任意描述的吗？

我正在清除此处缺少的内容，我一直在观看一些视频以尝试了解发生了什么，但是我认为这可能是在此最好地描述的一个简单原因。

Answer 1

您正在使用或误解了一些术语。我认为在深入研究React之前了解它们很重要。

首先，对象：

一个对象具有键/值对。

{
    fruit: "apple"
}

包含3个对象的数组（函数？）

这将是不正确的。由于数组的语法为[]。您所描述的是元素，成员或键。

下一部分是关于JavaScript的承诺。您有此代码。 axios.post("/api/auth", { credentials }).then(res => res.data.user),基本上是说，一旦您用api调用url，就会返回一些数据（我们存储在res中）。但是res在这种情况下是一个对象。

如果您管理日志res，则会得到一个类似这样的对象：

{
  ...
  key1: "something",
  key2: "something else",
  data: {
     ...
     user: { //some info about the user}
     ...
  },
  ...
}

您想要的是res中的数据，更具体地说，您需要用户的价值。因此，要访问它，您想使用res.data.user。

希望这能回答您的一些问题，但是有很多事情要讨论。您应该阅读有关js对象的更多信息。

https://www.w3schools.com/js/js_objects.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 2

欢迎来到JS world：）

创建的用户对象包含3个对象的数组（功能？）

是的，只有3个简单的功能

然后在响应数据传递到???的情况下调用一个promise。返回一个res.data.user对象。

当服务器响应状态为2 **时，解决了承诺（然后调用了函数），然后在res中，简单的对象来自服务器（状态，标头，响应主体），这里是描述什么资源的文档包含：https://www.npmjs.com/package/axios#response-schema

因此在res.data内部-客户端假定服务器以包含某些用户数据的用户对象作为响应（示例服务器返回json {user: {id: 1, name: 'Hary'}}）

我不明白res.data.user对象是什么，为什么？用点分隔而不是仅仅用这种形式描述像responseDataObject这样的东西？

您仅访问对象属性（示例res = {data: {user: {id: 1, name: 'Hary'}}}）因此，这段代码.then(res => res.data.user)只是返回用户的简单助手，而不是来自服务器的完整响应，在这里您可以使用它user.login({login: 'cool_user', password: 'qwerty'}).then(user => console.log(user.id))，因此，如果我假设服务器重调谐此数据，则成功后您将获得控制台用户ID登录

Answer 3

其他文章未涉及的一件事是这种语法：

export default {
    // ...
};

这将从api.js文件中导出对象。在此未将此对象分配给变量或未指定名称。而是在导入时执行此操作：

import api from 'api.js';

现在在具有此导入的文件中，名称api指的是从api.js导出的对象。因此，您可以执行api.user.login(credentials)之类的操作来调用此对象内部定义的函数之一。

Reactjs / JS-对对象/正在创建的内容感到困惑

3 个答案: