AbortController for cancellation in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new AbortController instance.

React Native

const controller = new [1]();

Drag options to blanks, or click blank then click option'

AEventController

BAbortSignal

CAbortController

DCancelController

Attempts:

3 left

💡 Hint

Common Mistakes

Using AbortSignal instead of AbortController

Using a non-existent controller name

The AbortController is used to create a controller that can abort fetch requests.

2fill in blank

medium

Complete the code to pass the abort signal to the fetch request.

React Native

fetch(url, { signal: [1].signal })

Drag options to blanks, or click blank then click option'

Acontroller

Babort

Csignal

Dcancel

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'signal' directly without the controller

Passing 'abort' or 'cancel' which are not valid

The signal property of the AbortController instance is passed to fetch to enable cancellation.

3fill in blank

hard

Fix the error in the code to abort the fetch request correctly.

React Native

controller.[1]();

Drag options to blanks, or click blank then click option'

Acancel

Bterminate

Cstop

Dabort

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cancel()' instead of 'abort()'

Using 'stop()' or 'terminate()' which do not exist

The correct method to cancel a fetch request is abort() on the controller.

4fill in blank

hard

Fill both blanks to create a fetch request that can be cancelled.

React Native

const controller = new [1]();
fetch(url, { signal: [2].signal });

Drag options to blanks, or click blank then click option'

AAbortController

Bcontroller

CAbortSignal

Dsignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using AbortSignal instead of AbortController for creation

Passing 'signal' string instead of the controller variable

First, create an AbortController instance, then pass its signal property to fetch.

5fill in blank

hard

Fill all three blanks to handle fetch cancellation with error catching.

React Native

const controller = new [1]();

try {
  const response = await fetch(url, { signal: [2].signal });
} catch (error) {
  if (error.name === '[3]') {
    console.log('Fetch aborted');
  }
}

Drag options to blanks, or click blank then click option'

AAbortController

Bcontroller

CAbortError

DCancelError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CancelError' instead of 'AbortError'

Not passing the controller.signal to fetch

Not creating an AbortController instance

Create an AbortController, pass its signal to fetch, and catch the error named AbortError when aborted.