讨论/技术交流/前端 Ajax 请求错误处理问题,怎么写出 clean code/
前端 Ajax 请求错误处理问题,怎么写出 clean code

正在开发第一个项目,现在遇到一个ajax错误处理问题,我不知道是集中抽象处理好,还是像下面的代码这样一直重复,正打算重新组织一下代码,集中抽象应该是必须的,目前想到的是把Error message 参数化(postData 或者 fetchData 的一个参数),有没有经验丰富无聊的前辈指点指点😘


// 没有把错误处理集中到一起,一是不熟悉错误种类,
// 另外就是感觉一个Error status 不能很好显示具体错误
export function postData (url, data, access="", timeout=7000) {
    return Promise.race([
        fetch(server + url, {
            method: 'post',
            body: JSON.stringify(data),
            headers: access ? {
                                'content-type': 'application/json',
                                'Authorization': 'Bearer ' + access,
                               }
                            : {'content-type': 'application/json'}
        }),
        new Promise((_, reject) =>
            setTimeout(() => reject(new CustomError('time out', 'time out')), timeout)
        )
    ])
}

    async function handleSignUp() {
        try {
            if (!user_name) throw new CustomError('user_name', "user name is empty!")
            if (!email) throw new CustomError('email', "Email is empty!")
            if (!password) throw new CustomError('password', "Password is empty!")

            const postUserInfo = await postData('/api/users/', {user_name, email, password})
            if (postUserInfo.status !== 201) throw new Error(postUserInfo.status)
            const user = await postUserInfo.json()
            if (email !== user.email || password !== user.password) throw new CustomError('dataEroor', "dataError")
            
            const fetchToken = await postData('/api/token/', { email, password })
            if (fetchToken.status !== 200) throw new Error(fetchToken.status)
            const token = await fetchToken.json()

            let refresh = token.refresh
            let avatarURL = ""
            saveItem('user', { user_name, email, avatarURL, refresh })
            setUser({ user_name, email, avatarURL, refresh })
            history.push('/')
        } catch (error) {
            if (error.message === "400") setError("user with this email address already exists.")
            else if (error.name === "CustomError") setError(error.message)
            else if (error.message === "timeout") setError(error.message)
            else setError('network issue!')
        }
    }
共 2 个回复

菜鸡(我)的一些看法:

  1. fetch用的不多,是不是和XMLHttpRequest对象一样,也有timeout这个属性,那就没必要饶个弯去写Promise.race()。
  2. 通用类的报错(比方说HTTP状态码401)肯定是交给一个抽象的类,去实现一些通用的功能,但某些具体的业务出错还是应当在具体的模块下处理。
1

没写过前端,后端接口一般有全局统一异常处理,特殊情况可以在代码处自行try catch 一次,自行处理,也可以选择继续throw到全局异常处理处,足够抽象通用的东西,就不会那么适合处理某些特别情况,灵活应变吧

1