How To Add Axios Response Interceptor To Post

rg45 wires - credit ElasticComputeFarm

What is Axios?

Axios is a promise-based HTTP client for the browser and node.js. Information technology comes with many useful defaults like automatically detecting JSON responses and returning an object instead of apparently text, throwing an error if the response status code is greater than 400.

What is an axios interceptor?

An Axios interceptor is a office that the library calls every time information technology sends or receives the asking. You tin can intercept requests or responses before they are handled by "then" or "take hold of".

Case:

                          // Add a asking interceptor              axios.interceptors.request.              employ              (              function              (              config              )              {              // Do something before request is sent              return              config;              }              ,              function              (              error              )              {              // Do something with request error              return              Promise.              refuse              (error)              ;              }              )              ;              // Add a response interceptor              axios.interceptors.response.              use              (              office              (              response              )              {              // Whatsoever condition code that prevarication within the range of 2xx crusade this role to trigger              // Do something with response data              return              response;              }              ,              function              (              error              )              {              // Any condition codes that falls exterior the range of 2xx crusade this function to trigger              // Do something with response error              render              Hope.              reject              (mistake)              ;              }              )              ;

Yous tin can also remove the interceptor from Axios.

                          const              myInterceptor              =              axios.interceptors.asking.              use              (              function              (              {              /*...*/              }              )              ;              axios.interceptors.asking.              eject              (myInterceptor)              ;

There is a big chance when building an app that you volition utilise an API that requires some credentials similar api_token or a user Auth token. Ordinarily, you will have to append the required headers with every HTTP request you make. Using Axios interceptors, yous can set this up once, and anywhere you call your Axios example, you are sure that the token is there.

            axios.interceptors.asking.              use              (              req              =>              {              // `req` is the Axios request config, so you can modify              // the `headers`.              req.headers.authorization              =              'Bearer mytoken';              return              req;              }              )              ;              // Automatically sets the potency header because              // of the request interceptor              const              res              =              wait              axios.              go              ('https:              /              /api.case.com')              ;

Log every request and response using interceptors.

Logging requests can be benign, especially when you have a large app and you don't know where all your requests are triggered. Using an Axios interceptor, y'all can log every asking and response speedily.

                          const              axios              =              require              ('axios')              ;              axios.interceptors.request.              use              (              req              =>              {              panel.              log              (                              `                                  ${                  JSON                  .                  stringify                  (req,                  zippo                  ,                  2                  )                  }                                `                            )              ;              // you must return the request object later on you are done              return              req;              }              )              ;              axios.interceptors.response.              use              (              res              =>              {              console.              log              (res.data.json)              ;              // y'all must return the response object after you are done              return              res;              }              )              ;              expect              axios.              post              ('https:              /              /instance.com/')              ;

Error treatment using Axios interceptors

You tin can use An Axios interceptor to capture all errors and raise them before reaching your end user. If you use multiple APIs with different fault object shapes, you tin can utilise an interceptor to transform them into a standard structure.

                          const              axios              =              require              ('axios')              ;              axios.interceptors.response.              use              (              res              =>              res,              err              =>              {              throw              new              Error              (err.response.data.message)              ;              }              )              const              err              =              await              axios.              get              ('http:              /              /instance.com/notfound')              .              catch              (              err              =>              err)              ;              // "Could not observe page /notfound"              err.message;

Add rate limiting to requests using interceptors.

Backend resources are limited and can cost a lot of money. Equally a client, you help reduce the load on your server past charge per unit-limiting your HTTP calls. Here'southward how y'all can do it using an Axios interceptor.

                          const              axios              =              crave              ('axios')              ;              const              debounce              =              crave              (              'lodash.debounce'              )              ;              axios.interceptors.request.              use              (              res              =>              {              return              new              Promise              (              (              resolve              )              =>              {              // but burn down a request every two sec              debounce              (              (              )              =>              resolve              (config)              ,              2000              )              ;              }              )              ;              }              )              ;              }              )