Vue学习-axios学习

axios的基本使用

安装

npm install axios --save

请求数据

import axios from 'axios'

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

// 默认是get请求
axios({
    url: 'http://123.207.32.32:8000/home/multidata',
}).then(function(res) {
    console.log(res);
})

携带参数

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

axios发送并发请求

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

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); // 数组
})

或者
.then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
})

axios配置信息相关

全局配置

baseURL

axios.defaults.baseURL = 'http://123.207.32.32:8000'

timeout

axios.defaults.timeout = 5000

常见的配置选项

请求地址: url
请求类型: method
根路径: baseURL
请求前的数据处理: transformRequest
请求后的数据处理: transformResponse
自定义的请求头： headers
URL查询对象: params
响应的数据格式： responseType

axios实例和模块的封装

axios实例

之前使用的是全局的axios，如果出现请求在不同的服务器上，就需要创建axios实例

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
});

模块化封装

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);
}

axios拦截器的使用

发送网络请求之前或者收到响应数据之后，对请求（响应）数据进行一些处理

请求拦截的作用

比如config中的一些信息不符合服务器的要求,要对请求参数进行一些处理
展示请求的loading
某些网络请求必须携带token，提示用户登录

响应拦截的作用

对响应数据进行一些处理

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    // 拦截器
    // 请求拦截器
    instance.interceptors.request.use(config => {
        // 1. 比如config中的一些信息不符合服务器的要求,要对请求参数进行一些处理
        // 2. 展示请求的loading
        // 3. 某些网络请求必须携带token，提示用户登录
        console.log('请求参数进行处理');
        return config;
    }, err => {
        console.log(err);
    });
    // 响应拦截器
    instance.interceptors.response.use(res => {
        console.log(res);
        return res.data;
    }, err => {
        console.log(err);
    });
    return instance(config);
}

结束语

Vue基础知识部分到这就告一段落了。

这是跟着B站的视频边学边记的笔记，以免学完之后过两天就忘完了，时不时的翻一下。

山河远阔、要热爱生活！