Add fetch example for ember (#93)

This commit is contained in:
NullVoxPopuli
2022-06-08 17:36:40 -04:00
committed by GitHub
parent 73fca45f73
commit de8dacf4bb
2 changed files with 61 additions and 0 deletions

View 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}}

View 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.