1. Advantages and disadvantages of GET and POST parameter transmission methods
More secure (not as part of the url, will not be cached, saved in server logs, and browser browsing history)
The amount of data sent is larger (get has a url length limit)
Can send more data types (get can only send ASCII characters)
Slower than get
It is a request to submit data to the server, and get is a request to request data from the server.
It is a request to submit data to the server, and get is a request to request data from the server.
Request contains more request headers
Before real data is accepted, the request header will be sent to the server for confirmation, and then the data will be actually sent.
2. The request process of GET and POST parameter transmission methods
The process of post request:
1. The browser requests tcp connection (first handshake)
2. The server agrees to perform tcp connection (second handshake)
3. The browser confirms and sends the post request header (the third handshake is the message is relatively small, so http will send the first data at this time)
4. The server returns 100 continue response
5. The browser starts sending data
6. The server returns 200 ok response
The process of getting request
1. The browser requests tcp connection (first handshake)
2. The server agrees to perform tcp connection (second handshake)
3. The browser confirms and sends the get request header and data (the third handshake is the message, so http will send the first data at this time)
4. The server returns 200 ok response.
III. Use of axios
1. Installation of axios
$ npm install axios // Use npm$ bower install axios // Use bower<script src="/axios/dist/"></script> // Call directly through cdn
2. The introduction of axios
import axios from 'axios';
3、get
The first parameter (parameter is on the url)
('/adate?id=123').then(res => {
(res);
})
The second parameter transfer (passing parameters through the param option)
('/adate?id=123',{
params: {
id: 1
}
}).then(res => {
(res);
})
4、post
('/api/axios', {
uname: 'lisi',
pwd: 123
}).then(ret => {
()
})
IV. Interceptor
1. Request an interceptor
import axios from 'axios'
const service = ({
baseURL: 'Basic Path',
timeout: 15000
})
//Add a request interceptor. Add tokens to the request interface.(
config =>{
// Successful callback },
error =>{
// Failed callback }
)
export default service
2. Response Interceptor
import axios from 'axios'
const service = ({
baseURL: 'Basic Path',
timeout: 15000
})
// Response Interceptor(
response => {
// Successful callback },
error => {
// Failed callback }
)
export default service
3. Case
/**
* Request encapsulation
*/
import axios from 'axios';
import configUrl from './';
import store from '../store';
const service = ({
baseURL: ,
// withCredentials: true, // Send cookies when cross-domain request timeout: 15000 // Request timeout});
//Add a request interceptor. Add tokens to the request interface.(
config =>{
= || ''; //Request to add token return config;
},
error =>{
return (error);
}
)
// Response Interceptor(
response => {
//If the interface returns token, replace the local old token if () {
("token", );
}
//Customize the background to return the response method corresponding to the code if ( == 203) { // Not logged in or logged in timeout return (new Error('Login timeout'));
} else { //The interface is normal, return data return response;
}
},
error => {
if () {
// this.$('The server is a bit off, please try again later!') //Error response alert('The server is offside, please try again later!')
}
return (error);
}
);
//Expose the encapsulated serviceexport default service;
This is the article about the transfer method and interceptor of axios get request and post request in Vue. For more related contents of axios get request and post request, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!