مشغول 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))
برای اطلاعات بیشتر میتونی به گیتهاب پروژه برید و مثال های مختلف رو ببنید.
مطلبی دیگر از این انتشارات
CSS Reset چیست؟ راهنما و آموزش کامل CSS Reset
مطلبی دیگر از این انتشارات
Thread ها در Node 10.5.0: یک شروع عملی
مطلبی دیگر از این انتشارات
نصب و راه اندازی flow