How to implement an elegant solution for front-end ajax requests

This time I will show you how to implement an elegant solution for front-end ajax requests. What are theprecautionsfor implementing an elegant solution for front-end ajax requests? The following is a practical case, let’s take a look.

Preface

AJAX, AsynchronousJavaScriptand XML (Asynchronous JavaScript and XML), a way to create interactive Web development technology solutions for web applications.

Asynchronous JavaScript:

Use [JavaScript language] and related [browser-provided class libraries] functions to send requests to the server. After the server processes the request, [automatically execute a certain JavaScript’scallback 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

Let me tell you a story first

This is similar to axios The API that supports Promise is 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 inresponse.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 ofresponse.datawill be like this:

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

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

Suddenly one day, after Duan said, "response.datais no longer an object, it has been changed to JSONstring, please do some processing~".

Then yes, for each interface, we need to change it toJSON.parse(response.data).obj, half a life!

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

If the backend says, "Not all are objects, some are JSON strings. Please check the updated interface document for details~". . .

If we had never met. . .

Later us

ES6 Proxy is used to modify the default behavior of certain operations, which is equivalent to making modifications at the language level, so it belongs A kind of "meta programming" (meta programming), that is, programmingprogramming language.

Proxy can be understood as setting up a layer of "interception" in front of the target object. External access to the object must first pass through this layer of interception, so it provides a mechanism to intercept external access. Filter and rewrite.

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:

Ajax+PHP code to change status and delete without refreshing

How to implement Ajax client Asynchronously calling the server

The above is the detailed content of How to implement an elegant solution for front-end ajax requests. For more information, please follow other related articles on the PHP Chinese website!