一、Axios的基本使用 ------ 2020-08-26

1、Axios的常用配置项

axios({
    // 发送给服务器的地址 baseURL + url

    // 接口地址
    url: '/user/list',
    // 自动添加在URL之前的服务器地址
    baseURL: 'http://www.baidu.com',
    // 请求方式
    methods: 'get',
    // 设置自定义请求头信息
    headers: {
        "Content-Type": "x-www-form-urlencoded"
    },
    // GET请求方式的传参，默认按照问号传参方式传递给服务器
    params: {
        search: ""
    },
    // POST请求方式的参数，默认将对象转换成JSON字符串，按照 application/json 格式传递给服务器
    data: {
        id: 1234,
        name: 'zhangsan'
    },
    // `paramsSerializer` 是一个负责 `params` 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
        return Qs.stringify(params, { arrayFormat: 'brackets' })
    },
    transformRequest: function(data) {
        // `transformRequest` 允许在向服务器发送前，修改请求数据
        // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
        // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
        return Qs.stringify(data);
    },
    // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
    // 如果请求话费了超过 `timeout` 的时间，请求将被中断
    timeout: 1000,
    // `responseType` 表示我们自己预设的服务器响应的数据类型，
    // 可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // default
    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    validateStatus: function(status) {
        return status >= 200 && status < 300; // default
    },
})

// Axios的公共配置
axios.defaults.baseURL = 'http://www.baidu.com';
axios.defaults.headers['Content-Type'] = 'x-www-form-urlencoded';
axios.defaults.transformRequest = data => Qs.stringify(data);
axios.defaults.timeout = 0;
axios.defaults.withCredentials = true;


// axios.get(url, [config])
// axios.post(url.data, [config])
axios.get('/list', {
    params: {
        page: 1,
        size: 50
    }
}).then(response => {
    /**
     * status
     * statusText
     * request: XHR实例对象
     * config: 自己传递的配置项信息
     * headers: 相应头信息
     * data: 响应主体信息，默认已经转成JSON格式
     */
})

axios.post('/list', {
    id: '123'
})

axios.interceptors.request.use(config => {
    let token = sessionStorage.getItem('token');
    if (token) {
        config.headers['Authorization'] = token;
    }
    return config
})

axios.interceptors.response.use(response => {
    // 从服务器获取到数据,我们只需要将 response中的data传递给下一个then
    return response.data;
}, error => {
    let response = error.response;
    // 说明服务器有响应
    if (error) {
        switch (error.status) {
            case 400:
                // 一般情况下未登录

                break;
            case 403:
                // 一般情况下登录过期
                break;

            case 404:
                // 地址不存在
                break;

            default:
                break;
        }
    } else {
        // 说明网络层出了问题,服务器无法连接
        if (!window.navigator.onLine) {
            alert('断网了')
        }
    }

    return Promise.reject(response)
})