(for your later review. If there is something wrong, I hope the boss will correct it)
1. What is Axios
Axios is a promise based HTTP library that can be used in browsers and node.js.
2.Axios features
- Create XMLHttpRequests from the browser
- Create http request from node.js
- Promise API supported
- Intercept requests and responses
- Convert request data and response data
- Cancel request
- Automatically convert JSON data
- Client support defense XSRF
3. Installation (cdn and npm can be installed, and npm is used here)
npm install axios
4. Some API s commonly used by Axios
Default configuration (two are listed, and others can be viewed on the official website)
axios.defaults.timeout = 1000 / / set the global timeout
axios.defaults.baseUrl = 'localhost:8080' / / set global baseUrl
instantiation
axios.create([config])
You can create a new axios. The advantage is that when you request two servers with different ports and domain names, you can create two instantiated objects, and then write their own relevant information in their respective configurations (such as configuring their respective base addresses) to facilitate the later access to data.
const a = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} })
Methods (only some common methods are listed)
Both axios and axios instances can be called (get and post are used here as examples, and others are similar)
1.axios(config)
general / most essential way to send any type of request
axios({ method: 'post', //It can be modified as get request url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
- axios.request(config)
equivalent to axios(config) - axios.get(url[, config])
Send a get request to read data from the server
axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
- axios.delete(url[, config])
send a delete request to delete the server-side data - axios.post(url[, data[, config]])
send a post request to add new data to the server
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
- axios.put(url[, data[, config]])
send a put request to update the data on the server
Note: config is an object with the following parameters:
url
method
baseURL
headers
params
data
timeout
responseType
responseEncoding
withCredentials
paramsSerializer
transformRequest
transformResponse
5.Axios interceptor
(1) . request Interceptor: a function that can check the request or configure specific processing before actually sending the request,
including success / failure functions, the passed must be config
// Add request interceptor axios.interceptors.request.use(function (config) { // What to do before sending the request return config; }, function (error) { // What to do about request errors return Promise.reject(error); });
(2) . response Interceptor: a function that can perform specific processing on response data after the request is returned,
includes success / failure functions. The default passed is response
// Add response interceptor axios.interceptors.response.use(function (response) { // Do something about the response data return response; }, function (error) { // Do something about response errors return Promise.reject(error); });