0

This is my api url, so now i want to call this after rerender happens, I am completely new to reactjs, so i need basic knowledge on how to call api using fetch/axios according to the api url? Expecting positive response.

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

T dhanunjay
  • 790
  • 1
  • 13
  • 46
  • 1
    Does this answer your question? [making restful api call from react js](https://stackoverflow.com/questions/29935827/making-restful-api-call-from-react-js) – Jay Sep 19 '20 at 09:46

2 Answers2

0

Create a reusable component for your HTTP client service.

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

Below is an example of a registration post request to the user information

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

N.B. Config.json file contains your API URL.

Below is an example of a registration form component that has a doSubmit method for calling the server and navigating to a login page after a successful registration.

...

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

This example is made for illustration purposes, and it could be modified accordingly to your API requests.

Amr
  • 646
  • 1
  • 6
  • 21
  • thanks for your response. i have a doubt, for suppose "http://newsapi.org/v2/everything?q=tech&apiKey=008c2c412a2b403698bc29a732374513&pageSize=10&page=1" if this url contains some info like author and description. if i want to make an api call for that, can you give me some small example on it. – T dhanunjay Sep 19 '20 at 12:45
  • https://stackblitz.com/edit/react-fetch-api-ttutry?file=index.js tried this but failed to fetch – T dhanunjay Sep 19 '20 at 12:59
-1

Try this:

import React, { Component } from 'react';

class YourComponent extends Component {
    state = {}

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

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

export default YourComponent;

For Axios API call: https://youtu.be/4uzEUATtNHQ

For Fetch API call:
https://youtu.be/cuEtnrL9-H0

For Learning React: https://www.youtube.com/playlist?list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG

  • thanks for your response. i have a doubt, for suppose "http://newsapi.org/v2/everything?q=tech&apiKey=008c2c412a2b403698bc29a732374513&pageSize=10&page=1" if this url contains some info like author and description. if i want to make an api call for that, can you give me some small example on it. – T dhanunjay Sep 19 '20 at 12:45
  • I tried this "https://stackblitz.com/edit/react-fetch-api-ttutry?file=index.js" – T dhanunjay Sep 19 '20 at 12:58