آموزش HTTP در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

آموزش HTTP در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش HTTP در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

ما به شما نحوه استفاده از واکشی برای رسیدگی به درخواستهای شبکه را نشان خواهیم داد.

App.js

import React from 'react';
import HttpExample from './http_example.js'

const App = () =&gt; {
   return (
      &lt;HttpExample /&gt;
   )
}
export default App

import React from 'react';

import HttpExample from './http_example.js'

const App = () => {

return (

)

}

export default App

با استفاده از Fetch

برای بارگذاری داده ها از سرور به محض نصب مولفه، از روش چرخه عمر componentDidMount استفاده خواهیم کرد. این تابع درخواست GET را به سرور ارسال می کند ، داده های JSON را برمی گرداند ، خروجی را برای کنسول وارد می کند و وضعیت ما را به روز می کند.

http_example.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'

class HttpExample extends Component {
   state = {
      data: ''
   }
   componentDidMount = () =&gt; {
      fetch('https://jsonplaceholder.typicode.com/posts/1', {
         method: 'GET'
      })
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
         console.log(responseJson);
         this.setState({
            data: responseJson
         })
      })
      .catch((error) =&gt; {
         console.error(error);
      });
   }
   render() {
      return (
         &lt;View&gt;
            &lt;Text&gt;
               {this.state.data.body}
            &lt;/Text&gt;
         &lt;/View&gt;
      )
   }
}
export default HttpExample

import React, { Component } from 'react'

import { View, Text } from 'react-native'

class HttpExample extends Component {

state = {

data: ''

}

componentDidMount = () => {

fetch('https://jsonplaceholder.typicode.com/posts/1', {

method: 'GET'

})

.then((response) => response.json())

.then((responseJson) => {

console.log(responseJson);

this.setState({

data: responseJson

})

.catch((error) => {

console.error(error);

});

}

render() {

return (

<View>

<Text>

{this.state.data.body}

</Text>

</View>

)

}

export default HttpExample

خروجی

React Native HTTP

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

آموزش HTTP در برنامه نویسی ریکت نیتیو

آموزش HTTP در برنامه نویسی ریکت نیتیو

App.js

با استفاده از Fetch

http_example.js

خروجی

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش HTTP در برنامه نویسی ریکت نیتیو

App.js

با استفاده از Fetch

http_example.js

خروجی

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه