Implementation of asynchronous processing

This time, we will explain the outline of asynchronous processing and how to implement asynchronous processing in the Office Scripts with the sample code.

About asynchronous processing

As a word, asynchronous processing indicates a processing that is not executed synchronously.

Please see the following code before the explanation of the implementation method.

fetch function type definition

function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

This is the type definition information of the fetch function that gets data from an external service.

As you can see, the return value of the function is wrapped in Promise.

The results of asynchronous processing are all wrapped in this Promise and indicate "the state where the result is returned".

Sample using fetch function

async function fetchGoogle() {
  const response = await fetch('https://www.google.com');

  console.log('got the data from Google');
}

function main(workbook: ExcelScript.Workbook) {
  fetchGoogle();

  console.log('Processing after acquiring data from Google');
}

The above sample defines asynchronous function fetchGoogle and is called from the main function.

At this stage, there is no problem if you can only understand that the implementation of fetchGooglecan be understood as "the result is returned asynchronously (returnPromise)".What you want to pay attention to is the behavior of the main` function.

I think that the expected behavior is that the subsequent processing in the main function is performed after fetchgoogle is completed, but the actual results are as follows.

Execution

Processing after acquiring data from Google
got the data from Google

main You can see that the following processing in the function has worked first.

Thus, if the order to wait for asynchronous processing is not specified, the result of the asynchronous process wrapped in Promise is performed the subsequent processing without waiting for the completion.

A pattern that waits for asynchronous functions

async function fetchGoogle() {
  const response = await fetch('https://www.google.com');

  console.log('got the data from Google');
}
async function main(workbook: ExcelScript.Workbook) {
  await fetchGoogle();

  console.log('Processing after acquiring data from Google');
}

Added async before main function function and await in front of fetchGoogle function.

With this, you can get the expected results.

Execution

got the data from Google
Processing after acquiring data from Google

asynchronous processing using async/await

The most recommended method of asynchronous processing in the Office Scripts is to use async/await.

By attaching async before function, the function to execute the function to execute, and the await is attached to the function that returns the result asynchronously, wait for the process until the result of the asynchronous function is obtained.

Sample using async/await

async function main(workbook: ExcelScript.Workbook) {
  /** Response from Google website */
  const google = await fetch('https://www.google.com');

  console.log('got the data from Google');

  /** Response from Yahoo website */
  const yahoo = await fetch('https://www.yahoo.co.jp');

  console.log('got the data from Yahoo');
}

Asynchronous processing using Promise

As mentioned above, the results of the asynchronous function are all wrapped in the Promise object, so the method of the Promise object can be used.

In this case, there is no need to attach async in front of function.

Sample using async/await

function main(workbook: ExcelScript.Workbook) {
  fetch('https://www.google.com')
    .then((google) => {
      console.log('got the data from Google');

      return fetch('https://www.yahoo.co.jp');
    })
    .then((yahoo) => {
      console.log('got the data from Yahoo');
    });
}

Compared to the async/await pattern, this method of using this Promise.then method chain is very different from normal synchronization processing, so it may be less readable.

We recommend using async/await, unless you are inevitable.