Vue learning – Axios learning

Basic use of Axios

The installation

npm install axios --save
Copy the code

The request data

import axios from 'axios'

new Vue({
    router,
    store,
    render: h= > h(App)
}).$mount('#app')

// The default is get request
axios({
    url: 'http://123.207.32.32:8000/home/multidata',
}).then(function(res) {
    console.log(res);
})
Copy the code

With parameters

axios({
    url: 'http://123.207.32.32:8000/home/data'.params: {
        type: 'pop'.page: 1
    }
}).then(res= > console.log(res));
Copy the code

Axios sends concurrent requests

axios.all([axios(), axios()]).then(results= > {
	results[0], results[1]})Copy the code

axios.all([
    axios({
        url: 'http://123.207.32.32:8000/home/multidata',
    }),
    axios({
        url: 'http://123.207.32.32:8000/home/data'.params: {
            type: 'pop'.page: 1
        }
    })
]).then(res= > {
    console.log(res); / / array}) or. Then (axios. Spread ((res1, res2) = > {
    console.log(res1);
    console.log(res2);
})
Copy the code

Axios configuration information is related

Global configuration

baseURL

axios.defaults.baseURL = 'http://123.207.32.32:8000'
Copy the code

timeout

axios.defaults.timeout = 5000
Copy the code

Common configuration options

• Request address: URL
• Request type: method
• Root path: baseURL
• Data processing before the request: transformRequest
• Post-request data processing: transformResponse
• Custom request headers
• URL Query object: params
• The data format of the response: responseType

Encapsulation of AXIOS instances and modules

Axios instance

Previously, we used global AXIOS, and if a request appeared on a different server, we needed to create an AXIOS instance

const instance1 = axios.create({
    baseURL: 'http://123.207.32.32:8000'.timeout: 5000
});
instance1({
    url: '/home/multidata'
}).then(res= > {
    console.log(res);
})

instance1({
    url: '/home/data'.params: {
        type: 'pop'.page: 1
    }
}).then(res= > {
    console.log(res);
})

const instance2 = axios.create({
    baseURL: 'http://111.207.32.32:8000'.timeout: 10000
});
Copy the code

Modular package

import axios from 'axios'
// export function request(config) {
// return new Promise((resolve, reject) => {
// const instance = axios.create({
/ / baseURL: 'http://123.207.32.32:8000',
// timeout: 5000
/ /});

// instance(config)
// .then(res => {
// resolve(res);
// }).catch(err => {
// reject(err);
/ /})
/ /});
// }


export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000'.timeout: 5000
    });
    return instance(config);
}
Copy the code

The use of axios interceptors

Some processing of the request (response) data before sending the network request or after receiving the response data

The role of request interception

1. For example, some information in config does not meet the requirements of the server, and some processing needs to be done on the request parameters

2. Display the loading of the request

3. Some network requests must carry tokens to prompt the user to log in

The role of response interception

1. Do some processing on the response data

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000'.timeout: 5000
    });
    / / the interceptor
    // Request interceptor
    instance.interceptors.request.use(config= > {
        // 1. For example, some information in config does not meet the requirements of the server, so some processing needs to be done on the request parameters
        // 2. Display the loading of the request
        // 3. Some network requests must carry tokens to prompt users to log in
        console.log('Request parameters for processing');
        return config;
    }, err= > {
        console.log(err);
    });
    // Response interceptor
    instance.interceptors.response.use(res= > {
        console.log(res);
        return res.data;
    }, err= > {
        console.log(err);
    });
    return instance(config);
}
Copy the code

conclusion

This concludes the Vue basics section.

This is a note I made while learning from the video of STATION B, so as not to forget it two days after learning it, so I can refer to it from time to time.

Video link: the most up-to-date Vue, Vuejs tutorial, from beginner to master _bilibili _bilibili

Mountains and rivers far wide, to love life!