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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
![VMware Horizon Client cannot be opened [Fix]](https://img.php.cn/upload/article/000/887/227/170835607042441.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
VMware Horizon Client cannot be opened [Fix]
Feb 19, 2024 pm 11:21 PM
VMware Horizon Client helps you access virtual desktops conveniently. However, sometimes the virtual desktop infrastructure may experience startup issues. This article discusses the solutions you can take when the VMware Horizon client fails to start successfully. Why won't my VMware Horizon client open? When configuring VDI, if the VMWareHorizon client is not open, an error may occur. Please confirm that your IT administrator has provided the correct URL and credentials. If everything is fine, follow the solutions mentioned in this guide to resolve the issue. Fix VMWareHorizon Client Not Opening If VMW is not opening on your Windows computer
![VMware Horizon client freezes or stalls while connecting [Fix]](https://img.php.cn/upload/article/000/887/227/170942987315391.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
VMware Horizon client freezes or stalls while connecting [Fix]
Mar 03, 2024 am 09:37 AM
When connecting to a VDI using the VMWareHorizon client, we may encounter situations where the application freezes during authentication or the connection blocks. This article will explore this issue and provide ways to resolve this situation. When the VMWareHorizon client experiences freezing or connection issues, there are a few things you can do to resolve the issue. Fix VMWareHorizon client freezes or gets stuck while connecting If VMWareHorizon client freezes or fails to connect on Windows 11/10, do the below mentioned solutions: Check network connection Restart Horizon client Check Horizon server status Clear client cache Fix Ho
PHP MQTT Client Development Guide
Mar 27, 2024 am 09:21 AM
MQTT (MessageQueuingTelemetryTransport) is a lightweight message transmission protocol commonly used for communication between IoT devices. PHP is a commonly used server-side programming language that can be used to develop MQTT clients. This article will introduce how to use PHP to develop an MQTT client and include the following content: Basic concepts of the MQTT protocol Selection and usage examples of the PHPMQTT client library: Using the PHPMQTT client to publish and
How to solve the 403 error encountered by jQuery AJAX request
Feb 20, 2024 am 10:07 AM
Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.
How to solve jQuery AJAX request 403 error
Feb 19, 2024 pm 05:55 PM
jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error
PHP and Ajax: Building an autocomplete suggestion engine
Jun 02, 2024 pm 08:39 PM
Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.
How to solve the problem that the Baidu Netdisk webpage cannot start the client?
Mar 13, 2024 pm 05:00 PM
When many friends download files, they will first browse on the web page and then transfer to the client to download. But sometimes users will encounter the problem that the Baidu Netdisk webpage cannot start the client. In response to this problem, the editor has prepared a solution for you to solve the problem that the Baidu Netdisk webpage cannot start the client. Friends in need can refer to it. Solution: 1. Maybe Baidu Netdisk is not the latest version. Manually open the Baidu Netdisk client, click the settings button in the upper right corner, and then click version upgrade. If there is no update, the following prompt will appear. If there is an update, please follow the prompts to update. 2. The detection service program of Baidu Cloud Disk may be disabled. It is possible that we manually or use security software to automatically disable the detection service program of Baidu Cloud Disk. Please check it out
How to solve the problem of jQuery AJAX error 403?
Feb 23, 2024 pm 04:27 PM
How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make
