Ajax request method in axios client

This time I will bring you the ajax request method in the axios client. What are the precautions for using the ajax request method in the axios client. The following is a practical case, let's take a look.

Preface

AJAX, Asynchronous JavaScript and XML (Asynchronous JavaScript and XML), a web development technology solution for creating interactive web applications.

Asynchronous JavaScript:

Use the functions of [JavaScript language] and related [browser-provided class libraries] to send requests to the server. After the server processes the request, [automatically execute a JavaScript callback function].

PS: The entire process of the above request and response is carried out [secretly], without any perception on the page.

Not much to say below, let’s take a look at the text of this article.

The http client of this article is axios

Tell me a story first

APIs like axios that support Promise are already very friendly. After the request is successful, we can get the data returned by the backend from then's Response. For example:

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

The data is in response.data, which means that we need to do one more process for each request to get the actual data.

Then, in actual scenarios, the backend will basically not give us the data directly. It will do a layer of encapsulation. For example, the structure of response.data will be like this:

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

Therefore, response.data.obj is the data we really want, so we need to do one more process for each request =_=

Suddenly one day, the backend said, "response.data is no longer an object, it has been changed to JSONstring, please do some processing~".

And yes, every interface, every one, we need to change to JSON.parse(response.data).obj, half a life!

If the backend says, "I changed the object back again, please undo the previous processing~". . .

If the backend says, "Not all are objects, some are JSON strings. For details, please see the updated interface document~". . .

If we had never met. . .

The Us Later

ES6 Proxy is used to modify the default behavior of certain operations, which is equivalent to making changes at the language level, so it is a kind of "meta programming", that is, to the programming language to program.

Proxy can be understood as setting up a layer of "interception" before the target object. External access to the object must first pass through this layer of interception. Therefore, it provides a mechanism to filter and rewrite external access.

To relieve the above troubles, we need to uniformly encapsulate all interface requests. In this way, even if the backend changes again and again, we only need to modify one place or even no modification at all!

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});

The corresponding interface request part is changed to:

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to realize the linkage of two zTree in a single page

How to call the WeChat sharing function in nodejs

The above is the detailed content of Ajax request method in axios client. For more information, please follow other related articles on the PHP Chinese website!