4,348
edits
React: Difference between revisions
completion of JavaScript section
completion of JavaScript section |
|||
| Line 324: | Line 324: | ||
// dinner: "mac and cheese" | // dinner: "mac and cheese" | ||
// } | // } | ||
</source> | |||
== Asynchronous requests == | |||
=== Simple promises with fetch === | |||
<source lang="js"> | |||
fetch("https://api.randomuser.me/?nat=US&results=1") | |||
.then(res => res.json()) | |||
.then(json => json.results) | |||
.then(console.log) | |||
.catch(console.error); | |||
</source> | |||
=== Async/Await === | |||
<source lang="js"> | |||
const getFakePerson = async () => { | |||
try { | |||
let res = await fetch("https://api.randomuser.me/?nat=US&results=1"); | |||
let { results } = res.json(); | |||
console.log(results); | |||
} catch (error) { | |||
console.error(error); | |||
} | |||
}; | |||
getFakePerson(); | |||
</source> | |||
=== Building Promises === | |||
<source lang="js"> | |||
const getPeople = count => | |||
new Promise((resolves, rejects) => { | |||
const api = `https://api.randomuser.me/?nat=US&results=${count}`; | |||
const request = new XMLHttpRequest(); | |||
request.open("GET", api); | |||
request.onload = () => | |||
request.status === 200 | |||
? resolves(JSON.parse(request.response).results) | |||
: reject(Error(request.statusText)); | |||
request.onerror = err => rejects(err); | |||
request.send(); | |||
}); | |||
getPeople(5) | |||
.then(members => console.log(members)) | |||
.catch(error => console.error(`getPeople failed: ${error.message}`)) | |||
); | |||
</source> | |||
== Classes == | |||
=== prototypical inheritance === | |||
<source lang="js"> | |||
function Vacation(destination, length) { | |||
this.destination = destination; | |||
this.length = length; | |||
} | |||
Vacation.prototype.print = function() { | |||
console.log(this.destination + " | " + this.length + " days"); | |||
}; | |||
const maui = new Vacation("Maui", 7); | |||
maui.print(); // Maui | 7 days | |||
</source> | |||
=== ES2015 way of declaring class === | |||
<source lang="js"> | |||
class Vacation { | |||
constructor(destination, length) { | |||
this.destination = destination; | |||
this.length = length; | |||
} | |||
print() { | |||
console.log(`${this.destination} will take ${this.length} days.`); | |||
} | |||
} | |||
const trip = new Vacation("Santiago, Chile", 7); | |||
trip.print(); // Chile will take 7 days. | |||
</source> | |||
Simple inheritance | |||
<source lang="js"> | |||
class Expedition extends Vacation { | |||
constructor(destination, length, gear) { | |||
super(destination, length); | |||
this.gear = gear; | |||
} | |||
print() { | |||
super.print(); | |||
console.log(`Bring your ${this.gear.join(" and your ")}`); | |||
} | |||
} | |||
const trip = new Expedition("Mt. Whitney", 3, [ | |||
"sunglasses", | |||
"prayer flags", | |||
"camera" | |||
]); | |||
trip.print(); | |||
// Mt. Whitney will take 3 days. | |||
// Bring your sunglasses and your prayer flags and your camera | |||
</source> | |||
== ES6 Modules == | |||
A module is a peice of reusable code that can easily be incorporated into other JavaScript files without causing variable collisions. | |||
In text-helpers.js, two functions are exported: | |||
<source lang="js"> | |||
export const print(message) => log(message, new Date()) | |||
export const log(message, timestamp) => | |||
console.log(`${timestamp.toString()}: ${message}`) | |||
</source> | |||
Exporting only one variable from a module using ''export default'' | |||
<source lang="js"> | |||
export default new Expedition("Mt. Freel", 2, ['water","snack"]); | |||
</source> | |||
=== Consuming using the '''import''' command === | |||
<source lang="js"> | |||
import { print, log } from "./text-helpers"; | |||
import freel from "./mt-freel"; | |||
print("printing a message"); | |||
log("logging a message"); | |||
freel.print(); | |||
</source> | |||
scoping under different name: | |||
<source lang="js"> | |||
import { print as p, log as l } from "./text-helpers"; | |||
p("printing a message"); | |||
l("logging a message"); | |||
</source> | |||
import everything | |||
<source lang="js"> | |||
import * as fns from './text-helpers` | |||
</source> | |||
=== CommonJS === | |||
the module pattern that is supported by all versions of Node, "Modules" | |||
e.g. | |||
<source lang="js"> | |||
const print(message) => log(message, new Date()) | |||
const log(message, timestamp) => | |||
console.log(`${timestamp.toString()}: ${message}`} | |||
module.exports = {print, log} | |||
</source> | |||
CommonJS does not support an '''import''' statement; modules are mported with the '''require''' function | |||
<source lang="js"> | |||
const { log, print } = require("./txt-helpers"); | |||
</source> | </source> | ||