如何基于reactjs中的网址在reactjs中进行Api调用？

如何解决如何基于reactjs中的网址在reactjs中进行Api调用？

这是我的api网址，所以现在我想在重新渲染后调用它，我是Reactjs的新手，所以我需要有关如何根据api网址使用fetch / axios调用api的基本知识？期待积极的回应。

http://newsapi.org/v2/everything?q=tech&apiKey=008c2c412a2b403698bc29a732374513&pageSize=10&page=1

解决方法

尝试一下：

import React,{ Component } from 'react';

class YourComponent extends Component {
    state = {}

    componentDidMount() {
        Your api call here...
    }

    render() {
        return (
             Your Codes Here...
        )
    }
}

export default YourComponent;

对于Axios API调用：https://youtu.be/4uzEUATtNHQ

对于Fetch API调用：
https://youtu.be/cuEtnrL9-H0

对于学习React：https://www.youtube.com/playlist?list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG

,

为您的HTTP客户端服务创建可重用的组件。

// httpService.js 
import axios from "axios"
axios.interceptors.response.use(null,error => {
    const expectedError =
        error.response &&
        error.response.status >= 400 &&
        error.response.status < 500;
    if (!expectedError) {
        console.log("Logging the error",error);
        alert("An unexpected error occurred");

    }
    return Promise.reject(error);
});
export default {
    get: axios.get,post: axios.post,put: axios.put,delete: axios.delete
};

下面是向用户信息发出注册请求的示例

// authService.js 

import http from "../services/httpService"
import { apiUrl } from "../../config.json"
const apiEndPoint = apiUrl + "";
export function register(user) {
  return http.post(apiEndPoint,{
    firstname: user.firstname,secondname: user.secondname,email: user.email,phone: user.phone,password: user.password,});
}

Config.json文件包含您的 API URL 。

下面是一个注册表单组件的示例，该组件具有一个doSubmit方法，用于在成功注册后调用服务器并导航到登录页面。

...

  doSubmit = async () => {
    // Call Server
    try {
      await userService.register(this.state.data);
      this.props.history.push("/Login"); // Programmatic Routing
    } catch (ex) {
      if (ex.response && ex.response.status === 400) {
        const errors = { ...this.state.errors };
        errors.username = ex.response.data;
        this.setState({ errors });
      }
    }
....

此示例仅用于说明目的，可以根据您的API请求进行相应的修改。