mirror of
https://github.com/lainbo/component-party.git
synced 2026-04-05 04:59:02 +08:00
Add fetch example for ember (#93)
This commit is contained in:
22
content/7-webapp-features/1-fetch-data/ember/demo.hbs
Normal file
22
content/7-webapp-features/1-fetch-data/ember/demo.hbs
Normal file
@@ -0,0 +1,22 @@
|
||||
{{#let (this.fetchUsers) as |request|}}
|
||||
{{#if request.isLoading}}
|
||||
|
||||
<p>Fetching users...</p>
|
||||
|
||||
{{else if request.error}}
|
||||
|
||||
<p>An error occurred while fetching users</p>
|
||||
|
||||
{{else}}
|
||||
|
||||
<ul>
|
||||
{{#each request.users as |user|}}
|
||||
<li>
|
||||
<img src={{user.picture.thumbnail}} alt="user">
|
||||
<p>{{user.name.first}} {{user.name.last}}</p>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
39
content/7-webapp-features/1-fetch-data/ember/demo.js
Normal file
39
content/7-webapp-features/1-fetch-data/ember/demo.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import Component from '@glimmer/component';
|
||||
|
||||
export default class Demo extends Component {
|
||||
fetchUsers = () => getUsers();
|
||||
}
|
||||
|
||||
class State {
|
||||
@tracked isLoading = false;
|
||||
@tracked error = null;
|
||||
@tracked data = null;
|
||||
}
|
||||
|
||||
function getUsers() {
|
||||
let state = new State();
|
||||
|
||||
async function fetchData() {
|
||||
state.isLoading = true;
|
||||
|
||||
try {
|
||||
let response = await fetch('https://randomuser.me/api/?results=3');
|
||||
let { results: users } = await response.json();
|
||||
state.data = users;
|
||||
state.error = null;
|
||||
} catch (err) {
|
||||
state.data = null;
|
||||
state.error = err;
|
||||
}
|
||||
|
||||
state.isLoading = false;
|
||||
}
|
||||
|
||||
fetchData();
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
// NOTE: in Polaris, the backing class for the component isn't needed at all.
|
||||
// `getUsers` could be invoked directly.
|
||||
Reference in New Issue
Block a user