Question

尝试使用Fetch调用API到我的后端，但我无法访问响应正文。在互联网上有关于此的不同符号和语法的战利品，我无法弄清楚如何正确地做到这一点。

我已经尝试过response.json（）和responseJson，并将两者兼容。我不能得到我想要的，这是响应的实际主体。它的意思是拥有一个我保存的密钥/令牌。

responseJson返回：responseJson：

{"_40":0,"_65":0,"_55":null,"_72":null}

这是我的功能：

export function LogIn(em, pass) {
    return (dispatch) => {

        console.log('LogIn called');
        dispatch(logInIsLoading(true));
        //from phone
        *fetch('http://192.168.1.18:8080/rest-auth/login/', {
          method: 'POST',
          headers: {
            // 'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'email': em,
            'password': pass,
          })
        }).then((response) => {
                console.log("response " + JSON.stringify(response));
                if (!response.ok) {
                    console.log("ERROR: " + response.statusText);
                    throw Error(response.statusText);
                }

                dispatch(logInIsLoading(false));

                return response;
            })
            .then((response) => {
              responseJson = response.json();
              console.log("responseJson: " + JSON.stringify(response.json()));

              return responseJson
            })
            .then((responseJson) => {

              AsyncStorage.multiSet([['key', responseJson.key], ['loggedIn', true]], () => {
                    console.log(responseJson.key);
                    dispatch(isLoggedIn(true));
                    dispatch(getKey(responseJson.key));

                });


            })*
            .catch(() => dispatch(logInHasErrored(true)));
    };
}

这是回复，但我无法找到正文中的密钥：

response {"type":"default","status":200,"ok":true,"headers":{"map":
{"allow":["POST, OPTIONS"],"set-cookie":
["csrftoken=DOMxD5IhNz5Vwm9a3niAR1tRyqBfNzUqnQMAEgk7AGwtwCgnRnZo9x0AMTM2IfK
q; expires=Fri, 22-Feb-2019 17:31:58 GMT; Max-Age=31449600; Path=/, 
sessionid=er3fujv8ji96t41n1n8dlzb3zz1itwuj; expires=Fri, 09-Mar-2018 
17:31:58 GMT; httponly; Max-Age=1209600; Path=/"],"content-type":
["application/json"],"content-length":["50"],"x-frame-options":
["SAMEORIGIN"],"vary":["Accept, Cookie"],"server":["WSGIServer/0.1 
Python/2.7.14"],"date":["Fri, 23 Feb 2018 17:31:58 
GMT"]}},"url":"http://192.168.1.18:8080/rest-auth/login/","_bodyInit":"
{\"key\":\"a9951fd6abff4fed35d9a8d1c275bf1212887513\"}","_bodyText":"
{\"key\":\"a9951fd6abff4fed35d9a8d1c275bf1212887513\"}"}

Answer 1

response.json（）返回Promise
AsyncStorage.multiSet - 返回Promise。 multiSet的第二个参数是将使用发现的任何特定于键的错误的数组调用的函数

export function LogIn(em, pass) {
    return (dispatch) => {
        console.log('LogIn called');
        dispatch(logInIsLoading(true));
        fetch('http://192.168.1.18:8080/rest-auth/login/', {
          method: 'POST',
          headers: {
            // 'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'email': em,
            'password': pass,
          })
        }).then((response) => {
           if (!response.ok) {
              console.log("ERROR: " + response.statusText);
              throw Error(response.statusText);
           }
           dispatch(logInIsLoading(false));
           return response;
        })
        .then((response) => {
              return response.json()
        })
        .then((responseJson) => {
              console.log('responseJson', responseJson);
              return AsyncStorage.multiSet([['key', responseJson.key],['loggedIn', true]], () => {
                    dispatch(logInHasErrored(true));
              })
              .then(() => {    
                  dispatch(isLoggedIn(true));
                  dispatch(getKey(responseJson.key));
              })
        })
        .catch(() => dispatch(logInHasErrored(true)));
    };
}

Answer 2

这与axios相当直接。首先通过[4, 3, 20, 10] # stored in `result`

安装axios

然后在npm install --save axios内执行此操作：

Component

确保您已分别在handleInput = async() => { const res = await axios.post('http://192.168.1.18:8080/rest-auth/login/', { email: this.state.email, password: this.state.password }); const data = await res.json(); console.log(data); }和this.state.email存储了电子邮件和密码，并在用户按下“提交”按钮时调用this.state.password。不要忘记导入axios handleInput

React Native Fetch API - 无法访问json或响应体

2 个答案: