拒絕時未完成的承諾

所以我有一個使用以下功能提交的表單：

const formSubmit = async (formData) => {
  const response = await SubmissionsResource.create(formData)
  const { data, status } = response
  console.log('Request completed.')
  if (status === 201) {
    toast.success('Submission created.')
  } else {
    toast.error('Something went wrong.')
    console.error(data)
  }
}

其中使用以下內容：

const SubmissionsResource = {
  create: ({ formData }) => (
    Request.privatePost(apiUrl('submissions'), formData)
  ),
}

其中使用以下內容：

export const Request = {
  privateRequest: ({ data, method, params, url }) => {
    axios.interceptors.request.use((request) => {
      request.headers.authorization = getBearerToken()
      return request
    }, (error) => Promise.reject(error))

    axios.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config

        // If request is coming from a sign in attempt
        if (error.response.status === 401 && originalRequest.url.includes('auth/token')) {
          return Promise.reject(error)
        }

        // If request is coming from elsewhere, assume token might be expired
        if (error.response.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true
          const refresh_token = LocalStorageService.getRefreshToken()
          const response = await axios.post(
            `${API_BASE}/oauth/token`,
            { client_id, client_secret, grant_type: 'refresh_token', refresh_token }
          )
          if (response.status === 200) {
            LocalStorageService.setUser(response.data)
            axios.defaults.headers.common.Authorization = getBearerToken()
            return axios(originalRequest)
          }
          return Promise.reject(error)
        }
        return Promise.reject(error)
      }
    )
    return axios({ method, url, data, params })
  },
  privatePost: (url, data) => (
    Request.privateRequest({ method: 'post', data, url })
  )
}

When the response is successful, I always see the "Request completed" log, and I see the toast.success message. However, when the request fails, I never see the "Request completed" log, nor the toast.error message.

The axios interceptor should retry once if the response comes back unauthorized (401 status code), which it successfully does, and in all other cases, reject the promise and return the error.

Request.privateRequest should reject the promise and return the error to Request.privatePost, which should return back to SubmissionsResource.create, and then finally to formSubmit. However, instead of completing the promise and returning an error, it just halts the entire function and doesn't ever get to the "Request completed" log.

我假設這是由于我對承諾的錯誤理解，但我無法弄清楚那是什么。為什么沒有完成承諾并繼續到下一行formSubmit？

uj5u.com熱心網友回復：

通過回傳 Promise.reject()，您是在告訴 axios 拒絕網路請求回傳的承諾，但呼叫代碼不會捕獲任何拒絕。

嘗試嘗試：

const formSubmit = async (formData) => {
  try {
    const response = await SubmissionsResource.create(formData)
    const { data, status } = response
    console.log('Request completed.');
    toast.success('Submission created.')
  } catch(error) {
    if (error.response.status === 401)
      toast.error('Bad news: 401.');
    else 
      toast.error('Some other kind of bad news.');
  }
}

標籤：javascript http 承诺 axios 拦截器

上一篇：我在我所有的專案中都得到了這個，我不知道為什么，這是怎么解決的

下一篇：每個主機的GolangReverseProxy