কীভাবে রিঅ্যাকটিজেএস কোড থেকে বিশ্রামের ডাক কল করবেন?

Question

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

যদি কোনও উদাহরণ উপস্থিত থাকে তবে তা সত্যই সহায়ক হবে।

Comments

আপনি যে উত্তরটি আপনাকে সাহায্য করেছিলেন তা চয়ন করতে পারেন?

— সক্রেটিস

Answer 1

সরাসরি প্রতিক্রিয়া ডক্স থেকে :

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

(এটি JSON পোস্ট করছে, তবে আপনি এটিও করতে পারেন, উদাহরণস্বরূপ, মাল্টিপার্ট-ফর্ম)

Comments

আপনাকে এটি ইনস্টল করতে হবে এবং এটি আমদানি করতে হবে । ভুলে যাবেন না, fetch()ফাংশনটি ডেটা ফেরায় না , এটি কেবল একটি প্রতিশ্রুতি দেয় ।

— মালভোলিও

হা হা @ ডিভিয়া, আপনার পড়ার আগে আমি একই মন্তব্য করতে চলেছিলাম। এটি React.createClass এ রাখবেন কিনা তা নিশ্চিত নন। এছাড়াও, আমরা দয়া করে প্রতিক্রিয়া ডক্সের একটি লিঙ্ক পেতে পারি? আমি তাদের সাইটটি অনুসন্ধান করার চেষ্টা করেছি ( facebook.github.io/react/docs/hello-world.html ) অসফল।

— টাইলার এল

আমরা দয়া করে আমদানি অন্তর্ভুক্ত করার জন্য মূল উত্তরটি সংশোধন করতে পারি?

— টাইলার এল

আইএমও, @ আমনের নীচে আরও ভাল উত্তর রয়েছে । এই উত্তরটি বোঝায় fetchযে প্রতিক্রিয়াটি তৈরি করা হয়েছে, এটি এটি নয় এবং উল্লেখ করা দস্তাবেজের কোনও লিঙ্ক নেই। fetch(লেখার সময়) একটি পরীক্ষামূলক প্রতিশ্রুতি ভিত্তিক এপিআই । ব্রাউজার-সামঞ্জস্যের জন্য আপনার একটি বাবেল পলফিল প্রয়োজন ।

— ক্রিস

দ্রষ্টব্য, এটি প্রতিক্রিয়া নেটিভ ডকস থেকে এসেছে, প্রতিক্রিয়া জেএস ডক্স নয়, তবে আপনি প্রতিক্রিয়া জেএসেও ফেচ_এপিআই ব্যবহার করতে পারেন। ফেসবুক.

— github.io/react-native/docs/network.html

Answer 2

আপনি কীভাবে আরএসটি কল করবেন সে সম্পর্কে প্রতিক্রিয়াটির আসলে কোনও মতামত নেই। মূলত আপনি এই কাজের জন্য আপনার পছন্দ মতো যে কোনও এজেএক্স লাইব্রেরি পছন্দ করতে পারেন।

প্লেইন পুরাতন জাভাস্ক্রিপ্টের সহিত সবচেয়ে সহজ উপায় সম্ভবত এরকম কিছু:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

আধুনিক ব্রাউজারগুলিতে আপনি এটিও ব্যবহার করতে পারেন fetch।

আপনার কাছে আরএসটি কল করার আরও উপাদান রয়েছে তবে উপাদানগুলিতে ব্যবহার করা যেতে পারে এমন শ্রেণিতে এই ধরণের যুক্তি যুক্ত করা বুদ্ধিমান হতে পারে। যেমনRESTClient.post(…)

Comments

আমার কাছে এটি সর্বোত্তম উত্তর, কারণ প্রতিক্রিয়াটির কোনও অন্তর্নির্মিত কিছুই নেই above উপরের পোস্টে পোস্ট করা ব্যতীত অন্য কিছু করার জন্য আপনাকে হয় আমদানি করতে হবে fetchবা superagentঅথবা jQueryবা axios"ভ্যানিলা রিএ্যাক্ট" এর অংশ নয় এমন অন্য কিছু করতে হবে either ।

— vapcguy

দেখে মনে হচ্ছে আপনি যদি ফ্লাস্ক ব্যবহার করছেন, এটি করতে ভাল কাজ করে JSON.stringify({"key": "val"})এবং তারপরে ফ্লাস্ক সাইডে করা হবেrequest.get_json()

— প্রো কিউ

হ্যাঁ, আপনি যদি JSON পোস্ট করছেন তবে আপনাকে JSON.stringifyপ্রথমে এটি করতে হবে।

— আম্মান

Answer 3

আর একটি জনপ্রিয় প্যাকেজ হ'ল অ্যাক্সেস

ইনস্টল করুন: npm install axios --save

সহজ প্রতিশ্রুতি ভিত্তিক অনুরোধ

---

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 4

আপনি উপস্থাপক ইনস্টল করতে পারেন

npm install superagent --save

তারপরে সার্ভারে পোস্ট কল করার জন্য

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  

Answer 5

2018 এবং তার পরেও, আপনার কাছে আরও আধুনিক বিকল্প রয়েছে যা আপনার রিঅ্যাক্টজেএস অ্যাপ্লিকেশনটিতে async অন্তর্ভুক্ত / অপেক্ষা করতে হবে। একটি প্রতিশ্রুতি ভিত্তিক এইচটিটিপি ক্লায়েন্ট লাইব্রেরি যেমন অডিও ব্যবহার করা যায়। নমুনা কোডটি নীচে দেওয়া হয়েছে:

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}

Comments

কোনও কারণে নোডেজগুলি ব্যাখ্যা করে await-SyntaxError: await is a reserved word (33:19)

— ই

@ প্রিয়াগআপ আপনি নোডের কোন সংস্করণ ব্যবহার করছেন?

— কেভিন লে - খনলে

Answer 6

আমি এইভাবে একটি স্বাভাবিক উপায় মনে করি। তবে দুঃখিত, আমি ইংরেজিতে বর্ণনা করতে পারি না (((

    submitHandler = e => {
    e.preventDefault()
    console.log(this.state)
    fetch('http://localhost:5000/questions',{
        method: 'POST',
        headers: {
            Accept: 'application/json',
                    'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.state)
    }).then(response => {
            console.log(response)
        })
        .catch(error =>{
            console.log(error)
        })
    
}

https://googlechrome.github.io/samples/fetch-api/fetch-post.html

আনুন ('ইউআরএল / প্রশ্ন', {পদ্ধতি: 'পোস্ট', শিরোনাম: cept স্বীকার করুন: 'অ্যাপ্লিকেশন / জেসন', 'সামগ্রী-প্রকার': 'অ্যাপ্লিকেশন / জেসন',}, বডি: JSON.stringify (this.state) }) .তখন (প্রতিক্রিয়া => {কনসোল.লগ (প্রতিক্রিয়া)}) c

Answer 7

বৈশিষ্ট্য এবং সমর্থনের উপর ভিত্তি করে এজাক্স লাইব্রেরিগুলির তুলনায় এখানে একটি তালিকা রয়েছে। আমি ব্যবহার করতে পছন্দ আনা শুধুমাত্র ক্লায়েন্ট সাইড উন্নয়ন বা isomorphic-আনা উভয় ক্লায়েন্ট সাইড এবং সার্ভার প্রান্তের উন্নয়নে ব্যবহার করার জন্য।

আইসমোর্ফিক-ফেচ বনাম আনতে আরও তথ্যের জন্য

Answer 8

উভয়ই পেতে এবং পোস্ট করার জন্য এখানে একটি ইউজ ফাংশন সংশোধিত (স্ট্যাকের অন্য পোস্ট)) Util.js ফাইলটি তৈরি করুন।

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

অন্য উপাদান হিসাবে নীচের মত ব্যবহার

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }

Answer 9

এখানে একটি উদাহরণ: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(result) {
    this.clearForm();
    this.setState({result:result});   
  }.bind(this)
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

এটি jquery.ajaxপদ্ধতি ব্যবহার করেছে তবে আপনি সহজেই এজেএক্স ভিত্তিক লাইবস যেমন অ্যাক্সিয়োস, হাইপারজেন্ট বা আনার মাধ্যমে এটি প্রতিস্থাপন করতে পারেন।

Comments

উদাহরণের জন্য অনেক ধন্যবাদ :)। আমার পরিষেবাটি JSON ফর্ম্যাট ডেটা প্রত্যাশা করে কিনা তাও আমি বুঝতে চেয়েছিলাম hen তবে কোন পরিবর্তনগুলির প্রয়োজন হবে? যে কোনও তথ্য সত্যই সহায়ক হবে। সুতরাং আমি যখন কার্ট কমান্ডটি শেষ পয়েন্টটি এর মতো কার্ল -v -X পোষ্ট লোকালহোস্টের মতো আঘাত করতে ব্যবহার করি : 8080 / myapi / ui / start -d 'Id "আইডি": "112", "ব্যবহারকারী": "xyz"}' সুতরাং আমি কিভাবে এই ধরনের একটি পরিষেবা কল করতে পারেন।

— দিব্যা

এর সাথে একটি ভেরিয়েবল নামে ডেটা তৈরি করুন '{"Id":"112","User":"xyz"}'এবং ইউআরএলকে লোকালহোস্টে পরিবর্তন করুন: 8080 / মায়াপি / ইউআই / শুরু করুন, এটি সম্পর্কে ঠিক আছে, এক্সএইচআর কল সফল হয়ে গেলে আপনি সম্পন্ন পদ্ধতিতে অবতরণ করবেন এবং ফলাফলের মাধ্যমে আপনার ডেটাতে অ্যাক্সেস পাবেন সম্পত্তি।

— সানিয়াম অগ্রওয়াল