Skip to main content

HTTP Requests

EDL provides access to axios globally for making HTTP requests within Script components.

Basic Usage​

GET Request​

<Script>
    axios.get('https://api.example.com/users')
        .then(response => {
            setState('users', response.data);
        });
</Script>

<Fragment :forEach={state.users} :as="user">
    <Text>{user.name}</Text>
</Fragment>

POST Request​

<Script>
    const newUser = {
        name: 'John Doe',
        email: '[email protected]'
    };
    
    axios.post('https://api.example.com/users', newUser)
        .then(response => {
            setState('createdUser', response.data);
        });
</Script>

Advanced Usage​

Error Handling​

<Script>
    axios.get('https://api.example.com/data')
        .then(response => {
            setState('data', response.data);
            setState('error', null);
        })
        .catch(error => {
            setState('error', error.message);
            setState('data', null);
        });
</Script>

<Text :if={state.error} color="red-500">{error}</Text>
<Fragment :if={state.data}>
    // Display data
</Fragment>

With Loading State​

<Script>
    setState('isLoading', true);
    
    axios.get('https://api.example.com/products')
        .then(response => {
            setState('products', response.data);
        })
        .catch(error => {
            setState('error', error.message);
        })
        .finally(() => {
            setState('isLoading', false);
        });
</Script>

<Text :if={state.isLoading}>Loading...</Text>
<Text :if={state.error}>{state.error}</Text>
<Fragment :if={!state.isLoading && !state.error}>
    <Fragment :forEach={state.products} :as="product">
        <Text>{product.name}</Text>
    </Fragment>
</Fragment>

With Dependencies​

<Script :dependencies={[categoryId]}>
    if (categoryId) {
        axios.get(`https://api.example.com/categories/${categoryId}/items`)
            .then(response => {
                setState('categoryItems', response.data);
            });
    }
</Script>

Available Methods​

  • axios.get(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.delete(url[, config])
  • axios.patch(url[, data[, config]])

Best Practices​

  • Always handle errors appropriately
  • Use loading states for better user experience
  • Consider caching responses when appropriate
  • Use dependencies to trigger requests when data changes
  • Keep request logic organized in separate Script components
  • Use meaningful state names for request results