首页 问答 nuxtjs中的ofetch怎么做无感刷新
问题详情

接口返回401就会进入onResponseError函数,在onResponseError里面会刷新token并重新发送请求,但是不管这个函数返回什么结果请求处理函数都会收到reject。

export default defineNuxtPlugin((nuxtApp) => {
  const settings = useSettings();
  const api: ReturnType<typeof $fetch.create> = $fetch.create({
    onResponseError: async ({ request, options, error, response }) => {
      const route = useRoute();
      let data = response._data;
      if (response.status === 401) {
        const result = await api("/api/auth/refreshToken");
        if (result.success) {
          return api(request, options);
        } else {
          await nuxtApp.runWithContext(() =>
            navigateTo(`/login/?redirectUri=${route.fullPath}`, { replace: true }),
          );
        }
      } else {
        const toast = useToast();
        toast.add({
          color: "red",
          title: `${response.status} ${response.statusText}`,
          description: data.message,
          icon: "i-heroicons-x-mark-20-solid",
        });
      }
      return Promise.reject(response._data);
    },
  });
  return {
    provide: {
      api,
    },
  };
});

回答

    async onResponseError({ request, options, error, response }) {

      const route = useRoute();

      let data;

      if (response._data instanceof ReadableStream) {

        const reader = response._data.getReader();

        const decoder = new TextDecoder("utf-8");

        let chunk = "";

        // eslint-disable-next-line no-constant-condition

        while (true) {

          const { done, value } = await reader.read();

          if (done) {

            data = JSON.parse(chunk);

            break;

          }

          chunk += decoder.decode(value);

        }

        response._data = data;

      } else {

        data = response._data;

      }



      if (response.status === 401) {

        const result = await api("/api/auth/refreshToken");

        if (result.success) {

          options.retryStatusCodes = [401];

          options.retryDelay = 0;

          options.retry = 1;

        } else {

          await nuxtApp.runWithContext(() =>

            navigateTo(`/login/?redirectUri=${route.fullPath}`, { replace: true }),

          );

        }

      } else {

        const toast = useToast();

        toast.add({

          color: "red",

          title: `${response.status} ${response.statusText}`,

          description: data.message,

          icon: "i-heroicons-x-mark-20-solid",

        });

      }

    },

    async onResponseError({ request, options, error, response }) {

      const route = useRoute();

      let data;

      if (response._data instanceof ReadableStream) {

        const reader = response._data.getReader();

        const decoder = new TextDecoder("utf-8");

        let chunk = "";

        // eslint-disable-next-line no-constant-condition

        while (true) {

          const { done, value } = await reader.read();

          if (done) {

            data = JSON.parse(chunk);

            break;

          }

          chunk += decoder.decode(value);

        }

        response._data = data;

      } else {

        data = response._data;

      }



      if (response.status === 401) {

        const result = await api("/api/auth/refreshToken");

        if (result.success) {

          options.retryStatusCodes = [401];

          options.retryDelay = 0;

          options.retry = 1;

        } else {

          await nuxtApp.runWithContext(() =>

            navigateTo(`/login/?redirectUri=${route.fullPath}`, { replace: true }),

          );

        }

      } else {

        const toast = useToast();

        toast.add({

          color: "red",

          title: `${response.status} ${response.statusText}`,

          description: data.message,

          icon: "i-heroicons-x-mark-20-solid",

        });

      }

    },

好难

版权:言论仅代表个人观点,不代表官方立场。转载请注明出处:https://www.stntk.com/question/1119.html

发表评论
暂无评论

还没有评论呢,快来抢沙发~

点击联系客服

在线时间:8:00-16:00

客服QQ

70068002

客服电话

400-888-8888

客服邮箱

70068002@qq.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站