Axios 클라이언트의 Ajax 요청 방법

이번에는 axios 클라이언트의 ajax 요청 메소드에 대해 알려드리겠습니다. axios 클라이언트에서 ajax 요청 메소드를 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

머리말

AJAX, Asynchronous JavaScript 및 XML(Asynchronous JavaScript and XML)은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술 솔루션입니다.

비동기 자바스크립트:

[JavaScript 언어] 및 관련 [브라우저 제공 클래스 라이브러리] 기능을 사용하여 서버에 요청을 보냅니다. 서버가 요청을 처리한 후 [특정 JavaScript 콜백 기능을 자동으로 실행]합니다.

PS: 위 요청 및 응답의 전체 과정은 페이지에서 어떠한 인식도 없이 [비밀롭게] 수행됩니다.

아래에서는 할 말이 많지 않습니다. 이 기사의 텍스트를 살펴보겠습니다.

이 기사의 http 클라이언트는 axios

입니다.

먼저 이야기를 들려드리겠습니다

Promise를 지원하는 Axios와 같은 API는 이미 매우 친숙합니다. 요청이 성공한 후에는 해당 응답에서 백엔드가 반환한 데이터를 얻을 수 있습니다. 예:

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

데이터는 response.data에 있습니다. 즉, 실제 데이터를 얻으려면 요청마다 프로세스를 한 번 더 수행해야 합니다.

response.data中，这意味着我们每个请求都需要多做一次处理才能拿到实际的数据。

然后，实际场景后端基本不会直接把数据给我们，他会做一层封装，比如response.data的结构会是这样：

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

所以，response.data.obj才是我们真正要的数据啊喂，所以我们每个请求都需要再多做一次处理=_=

突然有一天，后端说，“response.data不再是对象，改成了JSON字符串，你做一下处理~”。

然后是的，每个接口，是每一个，我们都需要改成JSON.parse(response.data).obj 그러면 실제 시나리오에서 백엔드는 기본적으로 데이터를 직접 제공하지 않습니다. 예를 들어 response.data의 구조는 다음과 같습니다.

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});

따라서 response.data.obj는 우리가 정말 원하는 데이터이므로 각 요청마다 하나의 프로세스를 더 수행해야 합니다 =_=

어느 날 갑자기 백엔드에서 "response.data는 더 이상 객체가 아니고 JSONString

처리 좀 해주세요~".

그리고 그렇습니다. 모든 인터페이스, 모든 인터페이스를 JSON.parse(response.data).obj로 변경해야 합니다.

백엔드에서 다시 "오브젝트를 다시 변경했습니다. 이전 처리를 취소하세요~"라는 메시지가 나타나면. . . 백엔드에서 "모두 개체는 아니고 일부는 JSON 문자열입니다. 자세한 내용은 업데이트된 인터페이스 문서를 참조하세요~"라고 말하는 경우. . .

우리가 한 번도 만난 적이 없었다면. . .

나머지 우리

ES6 프록시는 특정 작업의 기본

동작

을 수정하는 데 사용됩니다. 이는 언어 수준에서 수정하는 것과 동일하므로 일종의 "메타 프로그래밍", 즉

프로그래밍 언어

를 프로그래밍하는 것입니다.

프록시는 대상 개체 앞에 "가로채기" 계층을 설정하는 것으로 이해될 수 있습니다. 개체에 대한 외부 액세스는 먼저 이 가로채기 계층을 통과해야 합니다. 따라서 외부 액세스를 필터링하고 다시 작성하는 메커니즘을 제공합니다.

위의 문제를 해결하려면 모든 인터페이스 요청을 균일하게 캡슐화해야 합니다. 이런 식으로 백엔드가 계속해서 변경되더라도 한 곳만 수정하거나 전혀 수정하지 않아도 됩니다!

rreee 해당 인터페이스 요청 부분이 다음과 같이 변경되었습니다.

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:
한 페이지에서 두 개의 zTree 연결을 구현하는 방법

🎜🎜🎜nodejs에서 WeChat 공유 기능을 호출하는 방법🎜🎜🎜🎜

위 내용은 Axios 클라이언트의 Ajax 요청 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!