Axios Get请求返回错误400

Question

我需要帮助解决这个问题。我是react native和javascript的新手。现在我正在尝试将react native应用程序与API连接起来。这个过程要求我首先通过axios.post获取令牌，然后才能使用axios.get获取数据。

简而言之，以下是我的代码片段。

... // code 
const TOKEN_URL = 'https://test.co/testing/tokens'
const DATA_URL = 'https://test.co/testing/data/page1'

const getToken = () => {
    axios.post(TOKEN_URL, {
        email: 'email',
        password: 'password',
        role: 'user'
    })
    .then((response) => {
    //console.log(response.data.token);
    return response.data.token;
    })
    .catch((error) => {
        console.log(error);
    });
};

//'export' here is for use in other code: example onPress function
export const fetchDriver = () => {
    const config = {
        headers: {
            'Bearer': getToken()
        }
    };

    axios.get(DRIVER_URL, config)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });            
};

我期望的控制台日志应该是这样的：

{
    "timestamp": 1510038433,
    "verb": "GET",
    "object": "student",
    "data": {
        "age": "12",
        "id": "90000",
        "name": "Test Student",
        "emergencyName": "asd",
        "createdAt": "2017-10-04T05:39:39+00:00"
    }
}

但是我一直收到错误提示，显示请求失败，状态码为400

我正在使用Expo开发这个应用程序。

关于错误的详细信息如下：

- node_modules/axios/lib/core/createError.js:16:24 in createError
- node_modules/axios/lib/core/settle.js:19:6 in settle
- node_modules/axios/lib/adapters/xhr.js:78:13 in handleLoad
- node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:540:23 in 
setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:381:25 in 
__didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:182:12 in 
emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:306:47 in 
__callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:26 in 
<unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:269:6 in 
__guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:107:17 in 
callFunctionReturnFlushedQueue

如果错误来自api/server，我没有任何编辑权限。

如果代码片段中有任何遗漏的地方，请帮助我。感谢您的帮助和建议。

- Ling

---

你的 getToken() 方法是否返回有效的令牌？ - John

我通过 console.log(response.data.token) 进行了检查，它正确地返回了令牌。我甚至尝试直接硬编码令牌，但结果仍然相同。 - Ling

你改成那个答案中的代码了吗？因为看起来还是一样的。 - Mark Ezberg

Answer 1

顺便提一下，你忘了在 getToken 函数内部返回。

我来给你解释一下为什么会出现这种情况。Promise 是异步的，axios 调用也是异步的。因此你需要等待第一个调用的结果。否则如果你写 const a = axiosCall() 并立即使用它，a 的值将是 Pending（不是字符串），不能使用。

为此，你可以使用 Promise 或 async/await。我将向你展示使用 Promise 的正确方法。我只是复制了你的代码并进行了一些重构。还要记住，driver 仍然是一个 Promise，所以你需要像处理其他事物一样处理它。

const getToken = () => {
    axios.post(TOKEN_URL, {
        email: 'email',
        password: 'password',
        role: 'user'
    })
    .then((response) => {
    //console.log(response.data.token);
    return response.data.token;
    })
    .catch((error) => {
        console.log(error);
    });
};

//'export' here is for use in other code: example onPress function
export const fetchDriver = () => {
    const config = {
        headers: {
            'Bearer': getToken()
        }
    };

    axios.get(DRIVER_URL, config)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });            
};

- kWeglinski

Answer 2

你没有将请求链接起来。你必须等到获取到令牌后才能使用它。

就像这样

获取令牌

const getToken = () => {
    return axios.post(TOKEN_URL, {
        email: 'email',
        password: 'password',
        role: 'user'
    })
    .then((response) => {
    //console.log(response.data.token);
    return response.data.token;
    })
    .catch((error) => {
        console.log(error);
    });
};

fetchDriver

export const fetchDriver = () => {
  return getToken().then(token => {
    const config = {
      headers: {
        'Bearer': token
      }
    };

    return axios.get(DRIVER_URL, config)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  });
}

- QoP

---

未处理的 Promise 拒绝，[TypeError: undefined is not an object (evaluating 'getToken().then')]。 - Ling

你正在导入 getToken 吗？这两个函数在同一个文件中吗？ - QoP

看起来你忘记返回 Promise 了，应该写成 return axios.post(TOKEN_URL, {... 而不是 axios.post(TOKEN_URL, {...。我会修改我的答案。 - QoP

Answer 3

您需要等待 Token API 返回响应，然后再使用 Token 进行第二个 API 调用

修改如下：

getToken：更改为异步函数

const async getToken = () => {
    axios.post(TOKEN_URL, {
        email: 'email',
        password: 'password',
        role: 'user'
    })
    .then((response) => {
    //console.log(response.data.token);
    return response.data.token;
    })
    .catch((error) => {
        console.log(error);
    });
};

fetchDriver：在调用 getToken 函数时添加 await

export const fetchDriver = () => {
    const config = {
        headers: {
            'Bearer': await getToken()
        }
    };

    axios.get(DRIVER_URL, config)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });            
};

- Mani Ezhumalai