ant design pro 는 request 요청 방법 을 수정 하여 실제 업무 인터페이스 요청 에 부합 되 는 데이터 처리 방식 으로 수정 합 니 다.

ant design pro 는 request 요청 방법 을 수정 하여 실제 업무 인터페이스 요청 에 부합 되 는 데이터 처리 방식 으로 수정 합 니 다.
ant design pro 에서 fetch 를 패 키 징 처 리 했 습 니 다. utils / request. js 에 적 혀 있 습 니 다. 그러나 우리 의 일반적인 인터페이스 형식 처리 와 어 울 리 지 않 습 니 다. 우리 업무 에 발생 하 는 오류 코드 는 네트워크 계층 에 직접 두 지 않 고 json 에 두 기 때문에 수정 이 필요 합 니 다.
카피
ant design pro 의 프로젝트 에서 원래 의 요청 처리 에서 알 수 있 듯 이 프로젝트 에서 모든 오 류 를 네트워크 요청 오류 코드 에 넣 었 고 각종 오류 상 태 는 응답 헤드 status code 에서 보 여 주 었 기 때문에 원래 의 utils / request. js 의 방법 은 이렇게 쓰 여 있 습 니까?

//          status code    200-300  ，      
const checkStatus = response => {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `     ${response.status}: ${response.url}`,
    description: errortext,
  });
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
  throw error;
};

... //       

//fetch  
 return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => cachedSave(response, hashcode))
    .then(response => {
    //  then       DELETE  204     ，          json   
      // DELETE and 204 do not return data by default
      // using .json will report an error.
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })
    .catch(e => {
     //              ，         
      const status = e.name;
      if (status === 401) {
        // @HACK
        /* eslint-disable no-underscore-dangle */
        window.g_app._store.dispatch({
          type: 'login/logout',
        });
        return;
      }
      // environment should not be used
      if (status === 403) {
        router.push('/exception/403');
        return;
      }
      if (status <= 504 && status >= 500) {
        router.push('/exception/500');
        return;
      }
      if (status >= 404 && status < 422) {
        router.push('/exception/404');
      }
    });
}

이런 표기 법 에서 우 리 는 보통 밖에서 json 내의 상태 코드 가 200 인지 아 닌 지 를 판단 하여 다음 조작 을 진행 할 지 여 부 를 판단 해 야 한다. 이렇게 쓰 면 매우 번 거 롭 고 중복 작업 에 속 하기 때문에 이 를 수정 해 야 한다.
수정 후
저희 프로젝트 의 반환 형식 은 보통 이 렇 습 니 다.

//      
{
    code: 500
    data: null
    message: "    ,     "
}

//        
code: 200
data: {...}
message: "success"

그래서 다음 과 같은 수정 을 했 습 니 다.

//              ，200-400      ，            
const checkStatus = response => {
  if (response.status >= 200  && response.status < 400) {
    return response;
  }
  const errortext = codeMessage[response.status] || response.statusText;
  notification.error({
    message: `     ${response.status}: ${response.url}`,
    description: errortext,
  });
  if (status === 401) {
    // @HACK
    /* eslint-disable no-underscore-dangle */
    window.g_app._store.dispatch({
      type: 'login/logout',
    });
  }
  // environment should not be used
  if (status === 403) {
    router.push('/exception/403');
  }
  if (status <= 504 && status >= 500) {
    router.push('/exception/500');
  }
  if (status >= 404 && status < 422) {
    router.push('/exception/404');
  }
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
};

... //      

 return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => cachedSave(response, hashcode))
    .then(response => {
    //  json  ，    then  
      // DELETE and 204 do not return data by default
      // using .json will report an error.
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text();
      }
      return response.json();
    })
    .then(response => {
    //               ，200  response  data  ，          ，     
      if(!response.code) { //       mock      
        return  response
      }
      if(response.code == 200) {
        return  response.data
      }else {
        const status = response.code;
        if (status === 401) {
          // @HACK
          /* eslint-disable no-underscore-dangle */
          window.g_app._store.dispatch({
            type: 'login/logout',
          });
          return;
        }
        message.error(response.message);
        throw response
      }
    })

제 위 에 캡 처 오류 가 없 는 것 을 볼 수 있 습 니 다. 즉, catch 를 쓰 지 않 았 습 니 다. 이것 은 바로 외부 에서 json 안의 code 가 200 인지 아 닌 지 를 판단 하여 서로 다른 처 리 를 하고 if 판단 을 생략 하기 위해 서 입 니 다.다음은 effect 에서 의 사용 입 니 다.

try {
   yield call(updateUser, payload); 
   message.success('    '); //          ，         
}catch(e) {
	...//       ，        
}

위 에 제 처리 방식 이 있 지만 분명 다른 처리 방식 이 있 을 것 입 니 다. 더 좋 은 처리 방식 이 있 으 면 저 에 게 말씀 해 주 십시오. 물론 데 이 터 를 되 돌려 주 는 것 도 다 르 기 때문에 자신의 수요 에 따라 수정 할 수 있 습 니 다.