مشغول react-native و react هستم و دوست دارم که چیزایی که یاد گرفتم رو با بقیه به اشتراک بگذارم. ayooby.ir
ORM برای اتصال به API
فرض کنید که یک API/Restful دارید قراره یک سایت رو به این api متصل کنید و قراره که با express.js و react این پروژه رو انجام بدید. دو راه حل عموما میتونید پیش بگیرید، یکی اینکه دیتاهای api رو سمت کاربر لود کنید یا از طریق express.js اطلاعات رو گرفته و به کاربر نمایش بدید.
این آموزش راه حل دوم رو پوشش میده و با استفاده از کتابخونه YAK یک ORM رو شبیه سازی کنید.
بعد از نصب پکیج npm install yak-orm بعنوان مثال قرار هست که todo لیست هامون رو، دریافت کنیم و api ما این شکلی هست:
// GET: https://jsonplaceholder.typicode.com/todos/1
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
برای ساخت model، قدم اول، باید api رو وارد کنیم.
var Yak = require('yak-orm');
var yak = new Yak({
host: "https://jsonplaceholder.typicode.com/"
});
و بعد تعریف کردن مدلمون
var Todo = yak.model({
name: "todos"
});
var todo = new Todo.get({ id: 1 }).then(
todo => console.log(todo.attrs)
).catch(err => console.log(error))
نکته ای که باید توجه کنید اینه که ابجکی که از api ارسال شده رو باید توی attrs بهش دسترسی پیدا کنید.
برای ساخت یک todo جدید کافیه متد save رو استفاده کنید و اگه id رو هم اضافه کنم به payload، بصورت اتوماتیک درخواست PATCH ارسال میشه که برای ویرایش todo میشه استفاده کرد.
var todo = new Todo({
"userId": 11,
"title": "delectus aut autem",
"completed": false
})
.save()
.then( todo => console.log(todo.attrs))
.catch(err => console.log(error))
حالا اگه یک endpoint خاصی داشته باشیم چی؟ مثلا قراره نظرات پست شماره یک رو بگیریم
// GET https://jsonplaceholder.typicode.com/posts/1/comments/
var Post = yak.model({
name: 'posts',
postComments(id){
const url = `${this.endpoint}/${id}/comments`
return this.request('GET', url, {
success: res => res,
error: this.errorHandler,
})
}
})
var comments = new Post()
.postComments(2)
.then(comments => console.log(comments))
.catch(err => console.log(error))
برای اطلاعات بیشتر میتونی به گیتهاب پروژه برید و مثال های مختلف رو ببنید.
مطلبی دیگر از این انتشارات
نُد به طعم کاربرد! Hello World!
مطلبی دیگر از این انتشارات
شروع مینی پروژه با آنگولار !
مطلبی دیگر از این انتشارات
ایجاد Command Line با استفاده از JavaScript