Javascript: API Calls
We will use MVC pattern with following structure.
src
--js
--models
Search.js
--views
searchView.js
index.js
We will make simple api call to food2fork.com to get some recipes and we are using webpack
(see previous posts). We need to install axios from npm (npm install axios --save
) - this is handling http requests better than fetch
function, which doesnt work correctly in some older browsers. Also we are using proxy
here, because otherwise it will not work for use from our local server because of CORS
.
models/Search.js
import axios from 'axios';
export default class Search {
constructor(query) {
this.query = query;
}
async getResults() {
const proxy = 'https://cors-anywhere.herokuapp.com/';
const key = '.......' //register to food2fork to get api key
try {
const res = await axios('${proxy}http://food2fork.com/api/search?key=${key}&q=${this.query}');
this.result = res.data.recipes;
console.log(this.result);
} catch (error) {
alert(error);
}
}
}
index.js
import Search from './models/Search';
const search = new Search('pizza');
search.getResults();