API Rails 上的获取请求不返回 json

Posted 2023-02-22

【中文标题】API Rails 上的获取请求不返回 json

【英文标题】：Fetch request on API Rails doesn't return json

【发布时间】：2018-06-30 08:06:47

【问题描述】：

在 Rails API 中，我的 UsersController 中有一个登录 POST 方法，它接受 2 个参数（邮件和密码），如果找到记录，则检查 DB，如果找到，则将其返回为 JSON。

  def login(mail, password)
    mail, password = params.values_at(:mail, :password)
    user = User.where(mail: mail, password: password)
    render json: user
  end

在我的前端，在 React 中，我使用 fetch 调用此方法，它以表单形式获取邮件和密码值，并希望在我的'res' 中将用户作为 JSON：

  login = () => 
    if(this.state.mail != null && this.state.password != null)
        fetch('http://127.0.0.1:3001/api/login', 
            method: 'post',
            body: JSON.stringify(
                            mail: this.state.mail,
                            password: this.state.password
                        ),
            headers: 
                'Accept': 'application/json',
                'Content-type': 'application/json'
            
        )
        .then((res) => 
            console.log(res)
            if(res.data.length === 1 )
                const cookies = new Cookies();
                cookies.set('mercato-cookie',res.data[0].id,path: '/');
                this.setState(redirect: true)
            
        )
        bodyUsed: false
headers: Headers   
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://127.0.0.1:3001/api/login"
__proto__: ResponsePrototype  clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), …  auth.js:32

  

问题是我的res 与我返回的render json: user 不对应，所以我做了一个console.log(res)：

Response
bodyUsed: false
headers: Headers   
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://127.0.0.1:3001/api/login"
__proto__: ResponsePrototype  clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), …  auth.js:32

我尝试返回简单的 JSON 文本以防我的 user 变量出现问题，还尝试将 render json: user 更改为 format.json render json: user 但没有结果：/

我在 Postman 上提出了请求，它返回了适当的 JSON，所以我想问题出在我的 fetch 上？

【参考方案1】：

Fetch 的响应不会自动转换为 JSON，您需要调用 response.json()（它返回一个 Promise）来获取 JSON 值。请参阅this example from MDN，或者这里有一些 ES6 来匹配您的代码：

fetch(myRequest)
  .then(response => response.json())
  .then((data) => 
    // I'm assuming you'll have direct access to data instead of res.data here,
    // depending on how your API is structured
    if (data.length === 1) 
      const cookies = new Cookies();
      cookies.set('mercato-cookie', data[0].id, path: '/');
      this.setState(redirect: true);
    
  );

【讨论】：

谢谢，我确实错过了转换为 Json 的部分！