apisauce (axios wrapper) - Могу ли я обработать ошибку ответа, чтобы написать один раз и автоматически вызываться вместо добавления вручную, если еще - PullRequest
Новая
       24

apisauce (axios wrapper) - Могу ли я обработать ошибку ответа, чтобы написать один раз и автоматически вызываться вместо добавления вручную, если еще

0 голосов
/ 21 сентября 2018

У меня слишком много API для вызова в моем проекте, и я использую apisauce для связи с API

У меня есть пример кода: 

api.get("myUrl")
.then((response)=>{
  console.log(response)
  if(response.ok && response.status == 200){
    //displaying data to screen
  } else{
    //display alert failed to call API
  }
})

сейчас я хочу обработать, если authorization token is failed я хочу перенаправить на login page, но я не хочу добавлять код authorization token is failed ко всем моим api запросам

Есть лиспособ создать код else if(!response.ok && response.status == 401){redirectToLogin()} один раз вместо добавления этого кода во все мои API.get?

1 Ответ

0 голосов
/ 28 января 2019

Для нашего приложения «Реактив натив» я создаю класс с собственными методами get, delete, put, update, который обрабатывает ошибки, а затем вызывает apisauce.get и т. Д.

Я использую аннотации типа потока, но он будетлучше использовать машинопись для простого создания приватных методов. 

 type ApiRequest = (url: string, payload?: Object) => Promise<ApiResponse>;

 export class Api {
      apiSauce: {
        get: ApiRequest,
        post: ApiRequest,
        put: ApiRequest,
        delete: ApiRequest,
      };

      constructor(baseURL: string) {
        this.apiSauce = apisauce.create({
          baseURL,
          headers: {
            "Cache-Control": "no-cache",
          },
          timeout: 60 * 1000,
        });
      }

      _get = async (url: string, payload?: Object) => {
        const res = await this._handleResponse(this.apiSauce.get, { url, payload });
        return res;
      };

      _put = async (url: string, payload?: Object) => {
        const res = await this._handleResponse(this.apiSauce.put, { url, payload });
        return res;
      };

      _post = async (url: string, payload?: Object) => {
        const res = await this._handleResponse(this.apiSauce.post, { url, payload });
        return res;
      };

      _delete = async (url: string, payload?: Object) => {
        const res = await this._handleResponse(this.apiSauce.delete, { url, payload });
        return res;
      };


      _handleResponse = async (apiRequest: ApiRequest, params: ApiRequestParams): Promise<ApiResponse> => {
         const res = await apiRequest(params.url, params.payload);
         return this._handleError(res);
      };

      _handleError = (res: ApiResponse) => {
        if (!res.ok) {
          if (res.status === 401 || res.status === 403) {
            // **redirect to login page**
          }
          if (res.data && res.data.message) {
            showNotification(res.data.message);
          }
          showNotification(res.problem);
        }

        return res;
      };

      getUser = async (userId: string): Promise<User> => {
        const response = await this._get(`users/{userId}`);
        return transformUserApiResponse(response.data);
      };

}

const MyApi = new Api(BASE_URL);
...