美文网首页前端交流圈
axios请求问题总结

axios请求问题总结

作者: lulu_c | 来源:发表于2019-09-23 17:41 被阅读0次

一般现在请求接口都会使用axios,方便而且比较简洁,下面总结了一套比较通用的请求方法已经报错机制

代码如下:

处理一遍数据结构的then方法可以根据业务情况自行调整

import Axios from 'axios';
const axios = Axios.create({
    timeout: 200000
})
function ajax(method, url,  params) {
    function r() {
        if (method.toLowerCase() === 'get') {
            return axios.get(url, {
                params,
                headers: {
                    'token': ''
                },
            })
        } else if (method.toLowerCase() === 'post') {
           return axios.post(url, params, {
                headers: {
                    'token': ''
                }
            }) 
        }
    }
    return r().then(res => { /
        const data = res.data
        // 先处理一遍数据结构
        if (
            typeof data !== 'object' ||
            typeof data.data === 'undefined' ||
            typeof data.code === 'undefined' ||
            typeof data.msg === 'undefined'
        ) {
            throw `服务端返回数据格式不正确`;
        } else {
            return data;
        }
    }).then(data => {
        // 再处理code错误码
        if (data.code !== 0) {
            return Promise.reject(data); // 这个reject会返回给下面的catch 
        } else if (data.code === 0) {
            return data.data;
        }
    }).catch(e => { 
        errorHandler(e);
        throw e; // throw e返回错误给调用的局部catch,去掉的话会返回给局部then
    });
}
// 统一的错误报告
function errorHandler(e) {
    let errMsg = '请求出错!'
    let onClose = () => {}
    let duration = 2000
    if (typeof e === 'string') {
        errMsg = e
    } else if (e.response) {
        const { status } = e.response
        if (!(200 < status && status < 300 || status === 304)) {
            errMsg = '服务器请求超时,请稍后重试';
        }
    } else if (e.code === 200010005) { // code根据业务修改
        errMsg = '用户未登录';
        duration = 800;
        onClose = () => {
            // 跳转登陆
        }
    } else {
        errMsg = e.msg;
    }
// element UI的组件弹框
    Message({
        type: 'warning',
        message: errMsg,
        duration: duration,
        onClose: onClose
    });
}

export const getData = (url = '', params = {}) => {
    return ajax('get', url, params)
}

export const postData = (url = '', params = {}) => {
    return ajax('post', url, params)
}

相关文章

网友评论

    本文标题:axios请求问题总结

    本文链接:https://www.haomeiwen.com/subject/lappuctx.html