axios笔记

axios

1.发送请求

axios({
    url: ''
}).then(res => {
    console.log(res);
})

2.同时发送两个请求

使用axios.all，可以放入多个请求的数组

axios.all([
        axios({
            url: ''
        }),
        axios({
            url: ''
        })
    ]).then(results => {
    console.log(results);
    console.log(results[0]);
    console.log(results[1]);
})

axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2

axios.all([
    axios({
        url: ''
    }),
    axios({
        url: ''
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8666'
axios.defaults.timeout = 5000
axios.all([
    axios({
        url: '/home/multidata'
    }),
    axios({
        url: '/home/data'
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

常见的配置选项

创建axios对应的实例

const instance1 = axios.create({
    baseURL: 'http://123.207.32.32:8666',
    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);
})

封装axios

request.js

import axios from 'axios'

export function request(config) {

    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8666',
        timeout: 5000
    })

    return instance(config)
}

需要用到的地方

import { request } from './network/request'

request({
    url: '/home/multidata'

}).then(res => {
    console.log(res);

}).catch(err => {
    console.log(err);

})

拦截器

请求拦截

request.js

   //  2.axios的拦截器
    // 2.1请求拦截的作用
    instance.interceptors.request.use(config => {
        console.log(config);
        // 1.比如config中的一些信息不符合服务器的要求
        // 2.比如每次发送网络请求时，都希望界面中显示一个请求的图标
        // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
        return config

    }), err => {
        console.log(err);
    }

响应拦截

request.js

        // 2.2响应拦截
    instance.interceptors.response.use(res => {
       console.log(res);
        return res 
        
    }), err => {
        console.log(err);
    }