Knowledge of AXIOS

Record their learning process, convenient for their later access to learning, if there is the same problem, can help you is better, infringement can be deleted!
—- Itchao March 26, 2021 13:08:26

1. Jsonp related knowledge

In front-end development, JSONP is a common form of network request

  • The main reason to use JSONP is to solve the problem of cross-domain access.

How does JSONP work?

  • The core of JSNOP is passing
  • The reason is that when our project is deployed on the Domain1.com server, we cannot directly access the data on the Domain2.com server.
  • At this point, we use
  • So, the core of encapsulating JSONP is the name of the jSONP callback that we listen for on the window.

Why axios?

Recommended by the author!

Features:

  • Sends XMLHttpRequests requests in the browser
  • Send HTTP requests in Node.js
  • Supporting Promise API
  • Intercept requests and responses
  • Transform request and response data
  • , etc.

Iii. Basic use of AXIOS framework

  • 1 Download and install axiOS
  • 2 the import axios
  • 3 USES axios
axios({
    url:'http:xxxxx.xxxx.xxx'  // The default is get request
}).then(res= >{
    console.log(res);
})
Copy the code
axios({
    url:'http:xxxxx.xxxx.xxx'.// The default is get request
    params: {type:'pop'.page:1
    }
}).then(res= >{
    console.log(res);
})
Copy the code

4. Axios sends a concurrent request

When two requests need to be sent simultaneously:
  • With axios.all, you can put an array of multiple requests.
  • Axios.all ([]) returns an array. Use axios.spread to expand the array [res1, res2] to res1,res2
axios.all([axios({
    url:'http://xxx/xx/xxx'
}),axios({
    url:'http://yyy/y/yyyy'.params: {type:'sell'.page:5
    }
})]).then(axios.spread((res1, res2) = > {
    console.log(res1);
    console.log(res2);
}))
Copy the code

5. Axios configuration information is related

5.1 Global Configuration

  • Many parameters may be fixed in development.
  • We can do some extraction at this point, or we can take advantage of axios’s global configuration.

Key defaults

  • = ‘123.11.11.23 axios. Defaults. BaseURL: 8080’
  • axios.defaults.timeout = 5000

5.4 Common Configuration Options

  • Request the address
  • Request type (default is GET request)
  • Request root path
  • Pre-request data processing
  • Data processing after request
  • Custom request headers
  • URL Query object
  • Query object serialization function
  • Request body (data is passed in if the request type is POST)
  • Timeout setting s
  • Whether to carry a Token across domains
  • Custom request handling
  • Authentication information
  • Response of the json data format/blob/document/arratbuffer/text/stream
  • Etc. (There’s a lot of other information, look it up when you need it)

6. Axios instance and module encapsulation

6.1 Creating an axios instance

Why create an instance of Axios?
  • When importing objects from the AXIOS module, the instance used is the default instance
  • When you set some default configurations for this instance, they are fixed
  • In the subsequent development, some configurations may be different. Therefore, independent configurations are required instead of global configurations
  • At this point, you can create a new instance and pass in configuration information (independent, special configuration information) that belongs to the instance
const instance1 = axios.create({
    baseURL:'HTTP: XXXX / / 111.22.22.16:8080'.timeout:5000
})

instance1({
    url:'/home/multidata'
}).then(res= > {
    console.log(res);
})

instance1({
    url:'/home/data'.params: {type:'pop'.page:1}})Copy the code

6.2 Module Encapsulation

  • Promise was used for module encapsulation
  • Create a network folder and create request.js
  • The following code is in request.js
import axios 'axios'

export function request(config){
    return new Promise((resolve, reject) = > {
        1. Create an instance of axios
        const instance = axios.create({
            baseURL:'http://222.22.23.34:8080'.timeout:5000
        })
        
        // Send a real network request
        instance(config)
        .then(res= > {
            resolve(res)
        })
        .catch(err= > {
            reject(err)
        })
    })
}
Copy the code
  • The following code is in the reference code
import {request} from "./network/request"

request({
    url:'/home/xqwxsa'
}).then(res= > {
    console.log(res);
}).catch(err= > {
    console.log(err);
})
Copy the code

7. Use of axios interceptors

Axios provides an interceptor for each request we send or response we receive.

7.1 Functions of Request Interception

  • For example, some information in config does not meet the requirements of the server
  • For example, every time a network request is sent, you want a diagram of the request to be displayed in the interface
  • Some network requests, such as login (token), must carry special information
instance.interceptors.request.use(config= > {
    console.log(config);
    return config
},err= > {
    console.log(err);
})
Copy the code

7.2 Role of response interception

instance.interceptors.response.use(res= > {
    console.log(res);
    return res.data
}, err= > {
    console.log(err);
})
Copy the code