axios interceptor uses
<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
<style>
body {
padding: 20px;
}
.loading-box {
position: fixed;
top: 30%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-shadow: 1px 1px 3px #efefef;
display: none;
}
</style>
</head>
<body>
<!-- button -->
<button class="btn btn-primary" id="btn1">request 1</button>
<button class="btn btn-info" id="btn2">Request 2</button>
<button class="btn btn-warning" id="btn3">request 3</button>
<!-- loading area -->
<div class="loading-box">
<div class="spinner-border m-5 text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="./lib/axios.js"></script>
<script>
/* axios Interceptor Workflow
1. axios make a request
2. Execute the request interceptor: add the operation before ajax sends the request
3. The server receives, processes, and responds to requests
4. Execute Response Interceptor: Add action after server response
4. axios Receive the response (execute then method)
*/
// Add request interceptor
axios.interceptors.request.use(
function(config) {
// This request can be operated
// console.log(config); // ajax request parameters;
// Show loading effect
document.querySelector(".loading-box").style.display = "block"
// return fixed data
return config
},
function(error) {
// What to do about request errors, the following sentence, fixed syntax;
return Promise.reject(error)
}
)
// Add response interceptor
axios.interceptors.response.use(
function(response) {
//The data that the server responds to
// console.log(response);
// Hide the loading effect
document.querySelector(".loading-box").style.display = "none"
// Return the server response data to the then method of axios
return response
},
function(error) {
// Hide the loading effect
$(".loading-box").hide() // If it fails, the loading effect should also be hidden;
// Do something with response errors
return Promise.reject(error)
}
)
//button 1
document.querySelector("#btn1").onclick = function() {
axios({
url: "http://www.liulongbin.top:3009/api/news",
method: "get"
}).then(res => {
//success callback
console.log(res)
})
}
//button 2
document.querySelector("#btn2").onclick = function() {
axios({
url: "https://autumnfish.cn/fruitApi/fruits",
method: "get"
}).then(res => {
//success callback
console.log(res)
})
}
//button 3
document.querySelector("#btn3").onclick = function() {
axios({
url: "http://www.liulongbin.top:3009/api/login",
method: "post",
data:{ username:'admin',password:'123456'}
}).then(res => {
//success callback
console.log(res)
})
}
</script>
</body>
</html>
axios base address
//Set the axios base address: all requests add the previous http:// domain name by default
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
ajax knowledge points supplement
onreadstatechange event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/* XMLHttpRequest two events of
1. onload Event: The number of responses received from the server (one request will only be executed once)
2. onreadystatechang event : function with onload The event is consistent (one request will be executed multiple times)
XMLHttpRequest The object's status code ( xhr.readyState)
0: request not created (created xhr object, but has not called open)
1: server connection established
2. request received (send after,The server has received the request)
3. request processing
4. The request is complete and the response is ready (a status code of 4 is equivalent to onload event )
//(1). Instantiate the ajax object
let xhr = new XMLHttpRequest()
console.log(xhr.readyState)
//(2). Set the request method and address
xhr.open("post", "http://www.liulongbin.top:3009/api/login")
//(3). Set the request header (the post request needs to be set)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
console.log(xhr.readyState)
//(4). Send request: parameter format 'key=value'
xhr.send("username=admin&password=123456")
//(5). Register callback function
//a. onload is only supported by new browsers
//b. If you want to be compatible with earlier browsers, you can use onreadystatechange
//c. onreadystatechange trigger timing: xhr.readState state change
// xhr.onload = function() {};
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
//onreadystatechange will be triggered multiple times, generally need to judge xhr.readState == 4 to get the response data
if (xhr.readyState == 4) {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
Ajax components understand
- The full name of Ajax is Asynchronous Javascript And XML (asynchronous js and xml)
- Speaking human words: send asynchronous network requests with js
- A : Asynchronous
- Synchronization: Refers to the execution of code in order from top to bottom
- Asynchronous: The code will not be executed immediately, but will be executed after a while
- The ECMAScript we have learned so far has only two grammars that are asynchronous: timer and ajax
- DOM events are also asynchronous, but this is the execution mechanism of DOM. Therefore, when discussing js synchronization and asynchrony, js is the main focus, and DOM is generally not discussed.
- J: Javascript
- A : And
- X : XML and XMLHttpRequest
- XML: Solve cross-platform data transmission.
- Before JSON came out, network transmission was mainly based on data in XML format. Later, JSON came out and gradually replaced XML. However, since ajax technology came out earlier than json, the name xml has been retained to this day
- XML: Solve cross-platform data transmission.
Difference between get request and post request
- 1. Different ways of passing parameters
- get is spliced after the url (request line)
- post passes parameters in the request body
- 2. Different size limits
- get has a size limit, and different browsers have different size limits. Usually 2-5 KB
- post has no size limit
- 3. Different security
- The get parameters are directly exposed in the url, which is not safe (general query data is get)
- The post parameter is in the request body, which is more secure (general login and registration must be post)
- 4. The transmission speed is different
- get fast transfer speed
- slow post transfer
Learn about other request methods
`In actual development, the front end has no right to decide the request method, it only needs to follow the background interface document.
- The difference between put and pacth
- Global update: put
- Partial update: patch
| request method | describe | features |
|---|---|---|
| post | Generally used to add data (submit data) | request body parameter |
| get | Generally used to query data (query data) | request line (url) pass parameters |
| delete | Generally used to delete data | request body parameter |
| put | Generally used to update all data | request body parameter |
| patch | Generally used to update local data | request body parameter |
