将 Key 和 Value 放在 Axios 请求的 Headers 中

Question

预期
如何在Axios请求中将key和value作为header。

动作
我有这个 API 端点
https://netsocial-129849.uc.r.appspot.com/api/v1/posts
要获得响应，我需要传递值为 Authorization 的 key 和值为 5wrA97fGbbDCepQXf6qzyz9B6SzjK0YZXIg8kSQrPc8lEnUBAIXl1fg5ez08DfdU32T4B8anxDykG6joAIorPqM8vG

的 value

在我的移动应用程序中，我使用 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 请求的处理方式没有错误。你只需要像-

一样使用承诺

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>
    );
}

将 Key 和 Value 放在 Axios 请求的 Headers 中

Place Key and Value in Headers in Axios request

api

header

node.js

http-status-code-400

axios