javascript - জেএসএসে এপিআই কল করার সঠিক উপায় কী?




jquery reactjs (6)

1) আপনি শেষ পয়েন্টগুলি থেকে ডেটা আনতে F etch API ব্যবহার করতে পারেন:

কোনও ব্যবহারকারীর জন্য সমস্ত Github উদাহরণ

 /* Fetch GitHub Repos */ fetchData = () => { //show progress bar this.setState({ isLoading: true }); //fetch repos fetch(`https://api.github.com/users/hiteshsahu/repos`) .then(response => response.json()) .then(data => { if (Array.isArray(data)) { console.log(JSON.stringify(data)); this.setState({ repos: data , isLoading: false}); } else { this.setState({ repos: [], isLoading: false }); } }); }; 

2) অন্যান্য বিকল্প হ'ল অক্ষ ios

অক্ষগুলি ব্যবহার করে আপনি .json () পদ্ধতিতে http অনুরোধের ফলাফল পাস করার মধ্যবর্তী পদক্ষেপটি কাটাতে পারেন। অক্ষগুলি কেবল আপনার প্রত্যাশিত ডেটা অবজেক্টটি ফিরিয়ে দেয়।

 import axios from "axios"; /* Fetch GitHub Repos */ fetchDataWithAxios = () => { //show progress bar this.setState({ isLoading: true }); // fetch repos with axios axios .get(`https://api.github.com/users/hiteshsahu/repos`) .then(result => { console.log(result); this.setState({ repos: result.data, isLoading: false }); }) .catch(error => this.setState({ error, isLoading: false }) ); } 

এখন আপনি এই componentDidMount ডিডমাউন্টে কোনও কৌশল ব্যবহার করে ডেটা আনার জন্য চয়ন করতে পারেন

 class App extends React.Component { state = { repos: [], isLoading: false }; componentDidMount() { this.fetchData (); } 

এদিকে ডেটা লোড হওয়ার সময় আপনি অগ্রগতি বারটি প্রদর্শন করতে পারেন

 {this.state.isLoading && <LinearProgress />} 

আমি সম্প্রতি অ্যাংুলার থেকে রিএ্যাকটিজে চলে এসেছি। আমি এপিআই কলগুলির জন্য jQuery ব্যবহার করছি। আমার একটি এপিআই রয়েছে যা একটি এলোমেলো ব্যবহারকারীর তালিকা প্রদান করে যা একটি তালিকায় মুদ্রিত হবে।

আমি কীভাবে আমার এপিআই কল লিখব তা নিশ্চিত নই। এর জন্য সর্বোত্তম অনুশীলন কী?

আমি নিম্নলিখিত চেষ্টা করেছিলাম কিন্তু আমি কোনও আউটপুট পাচ্ছি না। প্রয়োজনে বিকল্প এপিআই লাইব্রেরি প্রয়োগের জন্য আমি উন্মুক্ত।

নীচে আমার কোডটি দেওয়া হয়েছে:

import React from 'react';

export default class UserList extends React.Component {    
  constructor(props) {
    super(props);
    this.state = {
      person: []
    };
  }

  UserList(){
    return $.getJSON('https://randomuser.me/api/')
    .then(function(data) {
      return data.results;
    });
  }

  render() {
    this.UserList().then(function(res){
      this.state = {person: res};
    });
    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">
          {this.state.person.map((item, i) =>{
            return(
              <h1>{item.name.first}</h1>
              <span>{item.cell}, {item.email}</span>
            )
          })}
        <div>
      </div>
    )
  }
}

আপনি ফ্লাক্স আর্কিটেকচারটি পরীক্ষা করে দেখতে চাইতে পারেন। আমি প্রতিক্রিয়া-রেডাক্স বাস্তবায়নও পরীক্ষা করে দেখার পরামর্শ দিই। আপনার কর্মগুলিতে আপনার এপিআই কলগুলি রাখুন। এটি উপাদানটিতে রাখার চেয়ে এটি অনেক বেশি পরিষ্কার।

ক্রিয়াগুলি হ'ল সহায়ক পদ্ধতি যা আপনি নিজের অ্যাপ্লিকেশনের অবস্থা পরিবর্তন করতে বা এপিআই কল করতে কল করতে পারেন।


এই আলোচনাটি কিছুক্ষণ হয়েছে এবং @ আলেকজান্ডার টি.র উত্তরটি কেবল আমার মতো প্রতিক্রিয়া জানাতে পারে তার জন্য অনুসরণ করার জন্য একটি ভাল গাইড সরবরাহ করে। এবং সম্ভবত নবাগত শুরুতে যে সমস্যার মুখোমুখি হতে পারে এমন সাধারণ সমস্যার জন্য এই আলোচনাটি কীভাবে করবেন তা আমি অতিরিক্তভাবে জানাব।

অফিসিয়াল ডকুমেন্টেশন থেকে componentWillReceiveProps(nextProps) :

প্রপ পরিবর্তনের প্রতিক্রিয়ায় আপনাকে রাষ্ট্র আপডেট করতে হবে (উদাহরণস্বরূপ, এটি পুনরায় সেট করতে), আপনি এটি.পড়গুলি এবং নেক্সটপ্রপসের তুলনা করতে পারেন এবং এই পদ্ধতিতে এই.সেটস্টেট () ব্যবহার করে রাষ্ট্রের ট্রানজিশনগুলি সম্পাদন করতে পারেন।

আমরা উপসংহারে আসতে পারি যে এখানে আমাদের প্যারামিটারগুলি হ্যান্ডেল করার জায়গা যা প্যারেন্ট উপাদান থেকে ইউআরএল বা প্রপস আসতে পারে, এপিআই কল থাকতে পারে এবং আপডেটের স্থিতি পেতে পারে।

@ আলেকজান্ডার টি। এর উদাহরণের ভিত্তিতে:

export default class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {person: []};
  }

  componentDidMount() {
   //For our first load. 
   this.UserList(this.props.group); //maybe something like "groupOne"
  }

  componentWillReceiveProps(nextProps) {
    // Assuming parameter comes from url.
    // let group = window.location.toString().split("/")[*indexParameterLocated*];
    // this.UserList(group);

    // Assuming parameter comes from props that from parent component.
    let group = nextProps.group; // Maybe something like "groupTwo" 
    this.UserList(group);
  }

  UserList(group) {
    $.getJSON('https://randomuser.me/api/' + group)
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    return (...)
  }
}

হালনাগাদ

componentWillReceiveProps() অবমূল্যায়ন করা হবে।

জীবনচক্রের এখানে কেবলমাত্র কয়েকটি পদ্ধতি ( Doc ) রয়েছে যা আমি মনে করি যে সাধারণ ক্ষেত্রে এপিআই মোতায়েনের সাথে সম্পর্কিত হবে:

উপরের চিত্রটি উল্লেখ করে:

  • componentDidMount() ডিডমাউন্ট componentDidMount() এপিআই স্থাপন করুন

    এখানে এপিআই কল দেওয়ার যথাযথ দৃশ্যটি হ'ল এই উপাদানটির সামগ্রী (এপিআইয়ের প্রতিক্রিয়া থেকে) স্থির হবে, componentDidMount() উপাদানটি মাউন্ট করার সময় componentDidMount() ডাইডমাউন্ট componentDidMount() কেবলমাত্র আগুন হবে, এমনকি নতুন প্রপসগুলি প্যারেন্ট উপাদান থেকে পাস হবে বা নেতৃত্বের জন্য পদক্ষেপ থাকবে re-rendering
    উপাদানটি পুনরায় রেন্ডার করতে পার্থক্য পরীক্ষা করে তবে পুনরায় মাউন্ট করতে পারে না।
    doc থেকে উদ্ধৃতি:

আপনার যদি কোনও দূরবর্তী প্রান্ত থেকে ডেটা লোড করা দরকার হয়, নেটওয়ার্ক অনুরোধটি ইনস্ট্যান্ট করার জন্য এটি একটি ভাল জায়গা।

  • static getDerivedStateFromProps(nextProps, prevState) এপিআই static getDerivedStateFromProps(nextProps, prevState)

আমাদের লক্ষ্য করা উচিত যে বর্তমান উপাদানটিতে দুটি ধরণের উপাদান আপডেটিং রয়েছে , setState() এই পদ্ধতিটিকে ট্রিগার করতে পরিচালিত করবে না , তবে setState() থেকে পুনরায় রেন্ডারিং বা নতুন setState() করবে। আমরা আবিষ্কার করতে পারি যে মাউন্ট করার সময় এই পদ্ধতিটিও ফায়ার করে।

যদি আমরা বর্তমান উপাদানটি কোনও টেম্পলেটের মতো ব্যবহার করতে চাই তবে এপিআই মোতায়েন করার উপযুক্ত জায়গা , এবং এপিআইয়ের নতুন পরামিতিগুলি প্যারেন্ট উপাদান থেকে আগত প্রপস
আমরা এপিআই থেকে আলাদা প্রতিক্রিয়া পেয়েছি এবং এই উপাদানটির বিষয়বস্তু পরিবর্তন করতে এখানে নতুন state ফিরিয়ে আছি।

উদাহরণ স্বরূপ:
প্যারেন্ট উপাদানগুলিতে বিভিন্ন গাড়ির জন্য আমাদের একটি ড্রপডাউন তালিকা রয়েছে, এই উপাদানটির নির্বাচিতটির বিশদ প্রদর্শন করা দরকার।

  • componentDidUpdate(prevProps, prevState) এপিআই componentDidUpdate(prevProps, prevState)

static getDerivedStateFromProps() থেকে static getDerivedStateFromProps() , এই পদ্ধতিটি প্রাথমিক রেন্ডারিং বাদে প্রতিটি রেন্ডারিংয়ের সাথে সাথেই শুরু করা হয়। আমরা এপিআই কলিং এবং একটি উপাদান মধ্যে রেন্ডার পার্থক্য থাকতে পারে।

পূর্ববর্তী উদাহরণটি প্রসারিত করুন:
গাড়ির বিবরণগুলি দেখানোর উপাদানটিতে এই গাড়ির সিরিজের একটি তালিকা থাকতে পারে, আমরা যদি ২০১৩ প্রযোজনাটি যাচাই করতে চাই, আমরা এই আচরণটি প্রতিফলিত করতে প্রথম setState() নেতৃত্ব দেওয়ার জন্য তালিকা আইটেমটি ক্লিক করতে পারি বা ... যেমন এই উপাদানটিতে তালিকার আইটেমটি হাইলাইট করা) এবং নীচের componentDidUpdate() আমরা নতুন প্যারামিটারগুলি (রাষ্ট্র) সহ আমাদের অনুরোধটি প্রেরণ করি। প্রতিক্রিয়া পাওয়ার পরে, আমরা setState() বিভিন্ন সামগ্রী setState() জন্য আবার setState() করি। নিম্নলিখিত componentDidUpdate() prevState componentDidUpdate() অনন্ত লুপের কারণ হতে রোধ করতে, আমরা এপিআই প্রেরণ করব এবং নতুন সামগ্রীটি রেন্ডার করব কিনা তা সিদ্ধান্ত নেওয়ার জন্য এই পদ্ধতির শুরুতে prevState ব্যবহার করে রাষ্ট্রের তুলনা করা দরকার।

এই পদ্ধতিটি প্রকৃতপক্ষে static getDerivedStateFromProps() সহ static getDerivedStateFromProps() মতোই ব্যবহার করা যেতে পারে তবে prevProps ব্যবহার করে prevProps পরিবর্তনগুলি পরিচালনা করতে হবে handle এবং প্রাথমিক এপিআই কলটি পরিচালনা করতে আমাদের componentDidMount() সহযোগিতা করতে হবে।

doc থেকে উদ্ধৃতি:

... যতক্ষণ না আপনি বর্তমান প্রপসগুলি পূর্বের প্রপসের সাথে তুলনা করেন ততক্ষণ নেটওয়ার্ক অনুরোধগুলি করার জন্য এটি একটি ভাল জায়গা ...


এই ক্ষেত্রে, আপনি উপাদানডাডমাউন্টের ভিতরে এজাক্স কল করতে পারেন এবং তারপরে স্থিতি আপডেট করতে পারেন

export default class UserList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {person: []};
  }

  componentDidMount() {
    this.UserList();
  }

  UserList() {
    $.getJSON('https://randomuser.me/api/')
      .then(({ results }) => this.setState({ person: results }));
  }

  render() {
    const persons = this.state.person.map((item, i) => (
      <div>
        <h1>{ item.name.first }</h1>
        <span>{ item.cell }, { item.email }</span>
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{ persons }</div>
      </div>
    );
  }
}

fetch আপডেট করতে componentDidMount অভ্যন্তরে fetch পদ্ধতিটি ব্যবহার করুন। নীচের মত

....

componentDidMount(){
  fetch('https://randomuser.me/api/')
      .then(({ results }) => this.setState({ person: results }));
}

....


রিএ্যাক্ট ভি 16 ডকুমেন্টেশনের এই অংশটি আপনার প্রশ্নের উত্তর দেবে, কম্পোনেন্টডিডমাউন্ট () সম্পর্কে পড়বে:

componentDidMount ()

কম্পোনেন্ট মাউন্ট হয়ে যাওয়ার সাথে সাথে কম্পোনেন্টডিডমাউন্ট () শুরু করা হয়। সূচনা যা DOM নোড প্রয়োজন এখানে যেতে হবে। আপনার যদি কোনও দূরবর্তী প্রান্ত থেকে ডেটা লোড করা দরকার হয়, নেটওয়ার্ক অনুরোধটি ইনস্ট্যান্ট করার জন্য এটি একটি ভাল জায়গা। যে কোনও সাবস্ক্রিপশন সেট আপ করার জন্য এই পদ্ধতিটি ভাল জায়গা। আপনি যদি এটি করেন তবে কন্টেন্টউইলউনমઉન્ટ () এর সদস্যতা বাতিল করতে ভুলবেন না।

আপনি দেখতে পাচ্ছেন, কম্পোনেন্টডিডমাউন্টটি এপিআই কল করার জন্য সেরা স্থান এবং চক্র হিসাবে বিবেচিত হবে, নোডটিও অ্যাক্সেস করবে, এর অর্থ এই সময়ের মধ্যে কল করা নিরাপদ, ভিউ আপডেট করা বা আপনি যা করতে পারেন ডকুমেন্ট প্রস্তুত হওয়ার সময়, যদি আপনি থাকেন jQuery ব্যবহার করে, এটি কোনওভাবে আপনাকে ডকুমেন্ট.ইডিআর () ফাংশনটি মনে করিয়ে দেবে, যেখানে আপনি নিশ্চিত করতে পারেন যে আপনার কোডে আপনি যা করতে চান তার জন্য সবকিছু প্রস্তুত ...





reactjs