Python wechat ordering applet course video

https://edu.csdn.net/course/detail/36074

Python practical quantitative transaction financial management system

https://edu.csdn.net/course/detail/35475

1, Basic usage of axios:

✿ details before using axios:

1. The axios function object can be used as an axios(config) function to send requests, or it can be used as an object to call the method axios Request (config)

■ check the source code and find:
□ initially, axios is a function
(calling the axios(config) function to send the request is actually calling Axios prototype. Request (config) method)
□ in the follow-up, add some attributes [method attributes] (add the method attributes on the Axios prototype to instance, so Axios can call the attribute axios.request(config) to send a request)

2. [,] is an optional parameter list, for example: Axios Get (URL [, config]), where [, config] is an optional parameter

1. axios(config): call its own, general / essential method to send any type of request:

//Get button
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    //Call the axios method to send the AJAx request. The return value of the axios method is a Promise object (the then method can get the result of the asynchronous request)
    axios({
        //Request type
        method: 'post',
        //URL
        url:'http://localhost:3000/posts/2',
	    //Set request body (i.e. transmitted data)
        data:{
  	 	  title: "candy",
   	  	  author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

2,axios.request(config): call the method of attribute to send the request, which is equivalent to axios(config)

//Get button
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    //Call axios method to send AJAx request. The return value of axios method is a Promise object (then method can get the result of asynchronous request)
    axios.request({
        //Request type
        method: 'post',
        //URL
        url:'http://localhost:3000/posts/2',
	    //Set request body (i.e. transmitted data)
        data:{
  	 	  title: "candy",
   	  	  author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

3. Use the instance object of axios (created through axios.create([config]):

//Generally, when creating an axios instance, some default configurations are passed in
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});
//The instance and axios object functions are basically the same
//Using the instance object instance of axios, the return value of the method is a Promise object (the then method can get the result of asynchronous request)
instance({
    //Request type
    method: 'GET',
    //URL
    url: '/getJoke',
    //Set request body (i.e. transmitted data)
    params:{
       title: "candy",
       author: "i like"
    }
}).then(response => {
    console.log(response);
})

✿ what is the difference between using the axios(config) method and creating an axios instance object?

​ ■ axios.create(config) encapsulates Axios requests and the meaning of creating Axios instance objects: different request interfaces have different configurations. Creating a new Axios instance can have new configurations to meet the interface configuration requirements. Each Axios instance object has its own unique configuration, which is applied to interface requests with different requirements.

■ the axios instance object is basically the same as that of axios, but the instance object lacks the methods of canceling requests and sending requests in batches.

2, Interceptor of axios (preprocessing requests and responses)

1. Request Interceptor: Axios interceptors. request. Use (successful processing function, failed processing function)

■ request interception:

1. There may be some information in config that does not meet the requirements of the server
2. I hope that every time a network request is sent, a request icon can be displayed on the interface, that is, the circle that turns and turns
3. Some network requests must have special information, such as login (a token is required)

2. Response Interceptor: Axios interceptors. response. Use (successful processing function, failed processing function)

■ response interception:

1. Format the response data

3, Cancellation request for axios

■ function: cancel some users, repeatedly click the request button and send requests, causing pressure on the server

■ cancellation method:

(for example, create a cancellation token through a constructor): add the cancelToken attribute to the configuration object, and then get the parameter c (cancellation function) in the execution function

let cancel = null;
//Check whether the last request is completed (if not, cancel the current request)
if(cancle != null){
    cancle();
}
//axios send request
axios.get('/user/12345', {
    cancelToken: new axios.CancelToken(function executor(c){//Parameter c is the cancel function, cancel = c;
    })
}).then(response => {
    console.log(response);
    cancel = null; //After the request is executed, restore the initial value of cancel

});