Question

我正在使用Axios（和Vue.js）发布到api。我在捕获中添加了一个小条件，用于检查响应数据并进行比较。

有没有更好的方法来解决此问题，因为我可以想象，这种情况将越来越严重，难以维护。如何使用此示例实现拦截器？理想情况下，我想用更少的代码块更好地处理服务器错误响应。

axios
          .post("/api/apipathwillgohere", formData)
          .then(function(response) {
            self.sucessfulServerResponse = response.data.message;
            window.localStorage.clear();
            // console.log(response.data);
            if (response.data.success == true) {
              // localStorage.email = response.data.email;
              location.reload();
            } else {
              self.errorMessage = response.data.error;
              self.submitClicked = false;
              console.log(response.data.error);
            }
          })
          .catch(function(error) {
            // If BackEnd refresh flag is true, then refresh page
            if (
              error.response.data.data.refresh == true ||
              error.response.data.data.message == "Token mismatch"
            ) {
              self.submitClicked = true;
              location.reload();
            }

            self.submitClicked = false;
            self.serverError = getErrorMessage(error);

            //helper to get a displayable message to the user
            function getErrorMessage(error) {
              let responseBody;
              responseBody = error.response;
              if (!responseBody) {
                responseBody = error;
              } else {
                responseBody = error.response.data || responseBody;
              }
              return responseBody.message || JSON.stringify(responseBody);
            }
          })
          .then(() => {
            self.status = "";
          });

Answer 1

如果您希望对每个请求运行逻辑，则应使用拦截器（检查axios documentation中的拦截器部分。这对于auth情况特别有用，例如，如果您的api返回令牌无效，则应将用户重定向到登录页面。

如何使用此axios代码实现拦截器

1 个答案: