【Typescript】axiosのREADME読んでみた Part2【React】

この記事はReactでaxiosを使うために、axiosのREADMEを読んで得た情報をまとまたものです。React×Typescriptのサンプルコードも載せています。

こんにちは！nomurabbitです。今回はaxiosに関する記事です。

Part2の今回はPOSTメソッドについて、Typescriptの型もふまえて一緒に勉強していきましょう

Example
Performing a POST request
Performing multiple concurrent requests
参考

Example

本題のPOSTメソッドに入る前に、async/awaitを使う時の注意点です。

NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use with caution.

axiosに限った話ではなく、IEや古いブラウザではECMAScript 2017の文法は使えないということです。IEについてはMSのページにも明記されています。

Internet Explorer 11 では、ES5 以降の JavaScript バージョンはサポートされていません。

docs.microsoft.com

Performing a POST request

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post()の引数として

URL *必須
DATA（body） *任意
config *任意

をとります。HTTPヘッダーなどはconfigで指定することができます。HTTPヘッダーを指定しする場合、Typescriptだとこんな感じです。

Typescriptの例１） nomurabbit ver.

const getHttpPostResponse = () => {
  axios.post(apiUrl, httpRequestMessage, {headers: {'Content-Type': 'text/plain'}})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

また、Typescriptではaxios.post()のresolve時の戻り値はAxiosResponse型として返ってきます。

export interface AxiosResponse<T = any, D = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: AxiosResponseHeaders;
  config: AxiosRequestConfig<D>;
  request?: any;
}

なので、プログラムの中でもこのように "." で各プロパティにアクセスすることができます。

f:id:nomurabbit:20211225054958p:plain

またrejectした時がanyで返ってきます。

post<T = any, R = AxiosResponse<T>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;

reject時の扱いについてはREADMEのHandling Errorsという項目に記述があって、

axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});

実装してみると、こんな感じです。

Typescriptの例２） nomurabbit ver.

const getHttpPostResponse = () => {
  axios.post(apiUrl, httpRequestMessage)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
  });
}

発生するエラーによりますが、下記はerror.requestを表示させた例です。

f:id:nomurabbit:20211225060630p:plain

Performing multiple concurrent requests

Part2の最後はPromise.all()でも使えるよといった内容です。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });