Models
AJAX Abstraction for a Single Resource
AJAX Abstraction for a Single Resource
This page describes how to create a resource using a Model.
Let's say you have an API endpoint located at http://localhost:1337/tweets
and that a tweet
resource looks like this:
{
id: 1,
text: 'An old tweet'
}
To create a new Tweet, we need to issue a POST
request to http://localhost:1337/tweets
, and include the properties in the body of the request, like this:
POST http://localhost:1337/tweets
{
text: 'A new tweet'
}
The code below demonstrates how to do that using a Model:
import { Model } from 'lore-models';
const Tweet = Model.extend({
urlRoot: 'http://localhost:1337/tweets'
});
const tweet = new Tweet({
text: 'A new tweet'
})
tweet.save()
First we import Model
from lore-models
. Then we create a new model called Tweet
, and provide the location of the API endpoint we want to interact with as the urlRoot
property.
Once we have the Tweet
model created, we create an instance of that model, and provide the properties for the model in the constructor. Then we call tweet.save()
to create that resource through the API.
Because the instance we created has no id
, the tweet.save()
will be transformed into a POST
request, and an AJAX request will be sent that looks like this:
POST http://localhost:1337/tweets
{
"text": "A new tweet"
}
The tweet.save()
method returns a promise. If you need access to the response object, you can be notified when the API returns by chaining to that promise like this:
tweet.save().then(function(response) {
// do something with response
})
The response object will have a structure that looks like this:
const response = {
config: {
headers: {
Accept: "application/json, text/plain, */*"
},
method: "POST",
responseType: "json",
url: "http://localhost:1337/tweets"
},
data: {
id: 1,
title: "Some text",
createdAt: "2016-07-02T00:00:06.407Z",
updatedAt: "2016-07-02T00:00:06.407Z"
},
headers: {
"content-type": "application/json"
},
request: {...}, // XMLHttpRequest
status: 201,
statusText: "CREATED"
};
Models use the axios library for handling for all network request, and that means the properties you set on models are ultimately just converted into a config object that axios
understands.
For the save()
method, that means the tweet.save()
call we demonstrated above is ultimately converted into this axios
call:
import axios from 'axios';
axios({
url: 'http://localhost:1337/tweets',
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: {
text: 'A new tweet'
}
})
If you need more control over your network requests, such as adding headers, simply provide an options
object to get tweet.destroy()
call like this:
tweet.destroy({
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer token'
}
})
This object will be passed directly to the axios
call.
You can learn about all of the config options that
axios
supports here.