将键和值放在 Axios 请求的标头中

Question

预计
如何将键和值作为 Axios 请求中的标头。

行动
我有这个 API 端点

https://netsocial-129849.uc.r.appspot.com/api/v1/posts

要获得响应，我需要传递值为

key

的

Authorization

和值为

value

 的 

5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG

在我的移动应用程序中，我使用Axios请求

export default axios.create({
    baseURL: 'https://netsocial-129849.uc.r.appspot.com/api/v1/posts',
    headers: {
        Authorization: 'Bearer 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG',
    }
});

输出

Possible Unhandled Promise Rejection (id: 0):
Error: Request failed with status code 400

55: Error: Request failed with status code 400 at createError (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200434:17) at settle (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200424:14) at EventTarget.handleLoad (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200322:9) at EventTarget.dispatchEvent (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:34182:27) at EventTarget.setReadyState (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33251:14) at EventTarget.__didCompleteResponse (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33093:16) at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33203:47 at RCTDeviceEventEmitter.emit (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:7046:37) at MessageQueue.__callFunction (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2789:44) at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2511:17
config: {url: "/", method: "get", headers: {…}, baseURL: "https://netsocial-129849.uc.r.appspot.com/api/v1/posts", transformRequest: Array(1), …}
isAxiosError: true
request: EventTarget {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4, …}
response: {data: "Invalid token.", status: 400, statusText: undefined, headers: {…}, config: {…}, …}
toJSON: ƒ ()
message: "Request failed with status code 400"
stack: "Error: Request failed with status code 400↵    at createError (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200434:17)↵    at settle (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200424:14)↵    at EventTarget.handleLoad (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:200322:9)↵    at EventTarget.dispatchEvent (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:34182:27)↵    at EventTarget.setReadyState (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33251:14)↵    at EventTarget.__didCompleteResponse (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33093:16)↵    at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:33203:47↵    at RCTDeviceEventEmitter.emit (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:7046:37)↵    at MessageQueue.__callFunction (http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2789:44)↵    at http://192.168.1.84:8081/index.bundle?platform=ios&dev=true&minify=false:2511:17"
__proto__: Object

使用 React Native 的客户端

import React, { useState } from 'react';
import { View, Text, StyleSheet} from 'react-native';
import netsocial from '../api/netsocial';

const NetSocialApi = () => {
    const [results, setResults] = useState([]);
    const searchApi = async() => {
        const response = await netsocial.get('/');
        setResults(response.data);
    }
    searchApi();
    console.log("result", results);
    console.log("search", searchApi());
    return (
        <View>
            <Text>{results}</Text>
        </View>
    );
}

export default NetSocialApi;

Answer 1

您的 axios 请求的执行方式没有错误。 你只需要像这样使用 Promise 即可 -

axios.create({
    baseURL: 'https://netsocial-129849.uc.r.appspot.com/api/v1/posts',
    headers: {
        Authorization: 'Bearer 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG',
    }
})
.then((data) => {
    console.log(data);
  }).catch((error)=>{
     console.log("Error");
  });

Answer 2

您可以尝试使用

useEffect

钩子来进行 API 调用吗：

import React, {useEffect} from "react";
..
..
const NetSocialApi = () => {
    const [results, setResults] = useState([]);
    const searchApi = async() => {
        const response = await netsocial.get('/');
        setResults(response.data);
    }
    useEffect(()=>{
      searchApi();
    },[])

    return (
        <View>
            <Text>{results}</Text>
        </View>
    );
}