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

saber

4 سال پیش

امتیاز دهید post

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

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

مرحله 1 – ایجاد یک View

بیایید چهار دکمه ایجاد کنیم که برای ارسال درخواست به API ما استفاده می شود.

app.html

&lt;template&gt;
   &lt;button click.delegate = "getData()"&gt;GET&lt;/button&gt;
   &lt;button click.delegate = "postData()"&gt;POST&lt;/button&gt;
   &lt;button click.delegate = "updateData()"&gt;PUT&lt;/button&gt;
   &lt;button click.delegate = "deleteData()"&gt;DEL&lt;/button&gt;
&lt;/template&gt;

</template>

مرحله 2 – یک View-model ایجاد کنید

اورلیا برای ارسال درخواست به سرور، واکشی مشتری را پیشنهاد می کند. ما برای هر درخواستی که نیاز داریم توابع ایجاد می کنیم (GET ، POST ، PUT و DELETE).

import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {
   getData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
      .then(response =&gt; response.json())
      .then(data =&gt; {
         console.log(data);
      });
   }
   myPostData = { 
      id: 101
   }
    postData(myPostData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
         method: "POST",
         body: JSON.stringify(myPostData)
      })
        
      .then(response =&gt; response.json())
      .then(data =&gt; {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
    updateData(myUpdateData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })
        
      .then(response =&gt; response.json())
      .then(data =&gt; {
         console.log(data);
      });
   }
   deleteData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "DELETE"
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
         console.log(data);
      });
   }
}

import 'fetch';

import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {

getData() {

httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')

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

.then(data => {

console.log(data);

});

}

myPostData = {

id: 101

}

postData(myPostData) {

httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {

method: "POST",

body: JSON.stringify(myPostData)

})

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

.then(data => {

console.log(data);

});

}

myUpdateData = {

id: 1

}

updateData(myUpdateData) {

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

method: "PUT",

body: JSON.stringify(myUpdateData)

})

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

.then(data => {

console.log(data);

});

}

deleteData() {

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

method: "DELETE"

})

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

.then(data => {

console.log(data);

});

}

می توانیم برنامه را اجرا کرده و به ترتیب بر روی دکمه های GET ، POST ، PUT و DEL کلیک کنیم. می توانیم در کنسول ببینیم که هر درخواستی موفقیت آمیز است و نتیجه ثبت می شود.

Aurelia HTTP Example

منبع.

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

امتیاز دهید post

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

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

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

مرحله 1 – ایجاد یک View

app.html

مرحله 2 – یک View-model ایجاد کنید

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

دیدگاه شما

بدون دیدگاه

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

مرحله 1 – ایجاد یک View

app.html

مرحله 2 – یک View-model ایجاد کنید

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

دیدگاه شما

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

بدون دیدگاه