Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve the front-end ajax request, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Preface

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

Asynchronous JavaScript:

Send a request to the server using [JavaScript language] and related functions of [browser providing class library]. When the server has finished processing the request, [automatically execute the callback function of a JavaScript].

The http client of this article is axios

Let's start with a story.

API that supports Promise like axios is already very friendly. After a successful request, we can get the data returned by the backend from the Response of then. 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 process each request one more time to get the actual data.

Then, the actual scenario backend will 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"}

So, response.data.obj is the data we really want. Hello, so we need to do one more processing for each request.

Suddenly one day, the backend said, "response.data is no longer an object, it's changed to a JSON string, and you do something about it."

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

If, the back end says, "I have changed the object again, you undo the previous processing." no, no, no. no, no, no.

If, the back end also said, "not all are objects, some are still JSON strings, specifically you take a look at the updated interface document ~".

If, we have not met.

Later on, we

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

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

To relieve the above worries, we need to uniformly encapsulate all interface requests. In this way, even if the back end changes back and forth, we only need to change one place or not!

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 API request part is changed to:

ApiService.get ('/ user/12345') .then ((data) = > {console.log (data);}) .catch ((error) = > {console.log (error);}); that's all of the article "how to implement front-end ajax requests". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.