为何需逐层访问Redux异步代码中Error对象的嵌套属性？

这段代码里之所以不能直接写error.response.data.message，核心原因是不是所有错误都会有完整的response -> data -> message层级，直接访问会触发"读取未定义属性"的报错，具体分几种场景：

• 当请求根本没发送成功时（比如网络中断、跨域拦截），error对象里根本没有response属性，直接访问error.response会直接报错。
• 就算请求发出去了，服务器返回的响应可能不符合预期：比如只返回了状态码但没有data字段，或者data里不存在message属性，直接访问同样会报错。

而代码里用&&链式判断的逻辑，是利用了JS的短路求值特性：

• 只有当前面的属性存在（不是undefined或null）时，才会继续访问下一层属性；只要某一层不存在，整个链式表达式就会返回false，不会继续往下执行，自然就避免了报错。

最后那个(xxx) || error.message的逻辑，是做降级处理：如果从响应里拿不到有效的message，就用JS原生Error对象自带的message属性兜底。另外代码里的error.toString()其实是多余的，因为没有把结果赋值给变量，不会影响最终的message值。

附上原代码：

export const register = createAsyncThunk(
    "auth/register",
    async ({ username, email, password }, thunkAPI) => {
        try {
            const response = await authService.register(username, email, password);
            thunkAPI.dispatch(setMessage(response.data.message));
            //Testing by omiting below
            //return response.data;
        }
        catch (error) {
            //Why not just error.response.data.message?
            const message = (error.response && error.response.data &&
                error.response.data.message) || error.message
            error.toString();
            thunkAPI.dispatch(setMessage(message));
            return thunkAPI.rejectWithValue();
        }
    }
)

内容的提问来源于stack exchange，提问作者Zonaed Hasan