使用 react 和 redux 在 axios 的 get 请求中获取状态码 304

Question

我的 Redux Async Thunk 中有一个 get 请求。在调用 get 到我的 node.js 快速服务器后，它发送了一个 304 状态代码，由于某种原因我无法获取我的数据。

const userTokenAxios = axios.create({
  baseURL: '/api/shoes',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
});

userTokenAxios.interceptors.response.use((response) => {
  if (response.data.errorMessage === 'jwt expired') {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
  }
});

export const getShoesAsync = createAsyncThunk(
  'shoes/getShoesAsync',
  async (payload, { rejectWithValue }) => {
    try {
      const response = await userTokenAxios.get('/');
      console.log(response);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

正在从我的主页调用它：

useEffect(() => {
    dispatch(getShoesAsync());
  }, [dispatch]);

但是我无法获取任何数据，因为每次页面加载时服务器都会发送 304

我的后端控制器：

exports.getAllShoes = async (req, res, next) => {
  try {
    let query = Shoe.find({});
    const shoes = await query.populate([
      {
        path: 'user',
        select: 'username',
      },
    ]);

    return res.status(200).json(shoes);
  } catch (err) {
    return next(err);
  }
};

app.js 在我的后端文件夹中：

// ROUTES
app.use('/auth', authRouter);
app.use(
  '/api',
  expressJwt({ secret: process.env.JWT_SECRET, algorithms: ['HS256'] })
);
app.use('/api/shoes', shoeRouter);

package.json 在我的 client 文件夹中

"proxy": "http://localhost:9000"

我的网络预览：

Answer 1

问题出在你的拦截器上。响应拦截器必须 return 一个值，一个被拒绝的 promise 或抛出一个错误，否则生成的 promise 将以 undefined.

解析

您在成功响应拦截器中拦截令牌错误似乎也很奇怪。我会假设你会使用错误拦截器。

userTokenAxios.interceptors.response.use(
  res => res, // success response interceptor
  err => {
    // usually you'd look for a 401 status ¯\_(ツ)_/¯
    if (err.response?.data?.errorMessage === "jwt expired") {
      localStorage.removeItem('token');
      localStorage.removeItem('user');
    }

    return Promise.reject(err);
  }
);

如果您实际上以 200 状态响应令牌错误，则需要在成功拦截器中处理它

userTokenAxios.interceptors.response.use(
  res => {
    if (res.data.errorMessage === "jwt expired") {
      localStorage.removeItem('token');
      localStorage.removeItem('user');

      // Make this look like an Axios error
      return Promise.reject({
        message: "jwt expired",
        response: res,
      });
    }

    return res;
  }
);

您的请求中似乎也不需要结尾的 forward-slash，因此只需使用

const response = await userTokenAxios.get("");

使用 react 和 redux 在 axios 的 get 请求中获取状态码 304

Getting status code 304 on a get request with axios using react and redux

http-status-code-304

express

reactjs

redux

axios