기다리지 마십시오! API를 조롱하십시오

최신 웹 애플리케이션 개발에는 종종 프론트 엔드와 백엔드 사이의 느슨한 커플 링이 포함되며, 종종 별도의 팀이 처리합니다. 이로 인해 동기화 문제가 발생할 수 있습니다. 해결책은 백엔드 API를 시뮬레이션하여 예상되는 동작을 모방하는 "가짜"서버를 생성하는 것입니다. 이 과정은 조롱 이라고합니다. 이상적으로 조롱은 직접 백엔드 의존성없이 프론트 엔드 개발을 독립적으로 진행할 수 있도록합니다. 여러 조롱 방식이 존재하지만 이것은 어려울 수 있습니다.

이 기사에서는 프레임 워크 공유 방식 (프레임 워크 또는 바닐라 JavaScript에 적용 가능)을 사용하여 효과적인 API 조롱 및 신규 또는 기존 응용 프로그램의 구현을 보여줍니다.

Mirage : 클라이언트 측 모닝 솔루션

우리는 클라이언트 측 프레임 워크 인 Miragejs를 사용합니다. Mirage는 브라우저 내에서 작동하여 XMLHttpRequest 가로 채고 API 응답을 시뮬레이션하기위한 요청을 Fetch . 사용자 친화적 인 인터페이스를 제공하고 조롱 프로세스를 단순화합니다.

우리는 VUE를 사용하여 간단한해야 할 애플리케이션을 구축 할 것입니다 (접근법은 프레임 워크 독립적이지만).

Mirage 설정

Mirage 설치 :

 # npm
npm i miragejs -d

# 원사
원사 추가 miragejs -d

최적의 폴더 구조 :

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

api/mock/index.js 작성 :

 // api/mock/index.js
'miragejs'에서 {server} 가져 오기;

내보내기 기본 함수 ({환경 = '개발'} = {}) {
    새로운 서버 반환 ({
        환경,
        loures () {
            // 여기에 정의 된 경로
        },
    });
}

응용 프로그램의 부트 스트랩 파일 (예 : VUE 용 src/main.js )에서 :

 // main.js
'./api/mock/index'에서 CreateServer import;

if (process.env.node_env === 'Development') {
    CreateServer ();
}

이 조건부는 Mirage가 생산 빌드에서 제외되도록합니다.

Mirage의 작동 방식

Mirage는 Pretender Library를 사용하는 고객 측입니다. Pretender는 요청을 가로 채서 실제 서버에 도달하지 못하고 시뮬레이션 된 Mirage 서버로 라우팅합니다. DevTools의 네트워크 탭은 Mirage 요청이 내부적으로 처리되어 표시되지 않습니다.

처리 요청 처리

할 일 항목을 가져 오기 위해 /api/tasks endpoint를 만들어 봅시다 (Axios 사용) :

 // 구성 요소/tasks.vue
내보내기 기본값 {
    Async create () {
        노력하다 {
            const {data} = await axios.get ( '/api/tasks');
            this.tasks = data.tasks;
        } catch (e) {
            Console.error (e);
        }
    }
};

처음에 Mirage는 정의되지 않은 경로를 나타내는 오류를 기록합니다. api/mock/index.js 에서 경로 핸들러를 추가하여이를 해결합니다.

 // api/mock/index.js
loures () {
    this.get ( '/api/tasks', () => ({{
        작업 : [
            {id : 1, 텍스트 : "고양이 먹이"},
            {id : 2, 텍스트 : "요리 세척"},
        ],,
    });
},

Mirage는 다양한 HTTP 방법 ( get , post , patch , put , delete , options )을 지원합니다.

Mirage의 데이터 계층이있는 동적 데이터

동적 데이터의 경우 Mirage는 seeds 훅과 가벼운 데이터베이스를 제공합니다. refactor :

 // api/mock/index.js
씨앗 (서버) {
    server.db.loadData ({
        작업 : [
            {id : 1, 텍스트 : "고양이 먹이"},
            {id : 2, 텍스트 : "요리 세척"},
        ],,
    });
},

loures () {
    this.get ( '/api/tasks', (schema) => {
        반환 Schema.db.tasks;
    });
    this.post ( '/api/tasks', (schema, request) => {
        const task = json.parse (request.requestbody) .data;
        return schema.db.tasks.insert (작업);
    });
    this.delete ( '/api/tasks/: id', (schema, request) => {
        const id = request.params.id;
        return schema.db.tasks.remove (id);
    });
}

Route Handlers의 schema 매개 변수는 Mirage 데이터베이스에 대한 액세스를 제공합니다. request 매개 변수에는 요청 세부 사항이 포함되어 있습니다.

Mirage를 기존 응용 프로그램에 통합합니다

Mirage를 기존 응용 프로그램에 통합하려면 passthrough() 메소드를 사용하여 처리되지 않은 요청을 처리하십시오.

 loures () {
    this.get ( '/api/tasks', () => {... ...});
    this.passthrough (); // 처리되지 않은 요청을 처리합니다
}

사용자 정의 urlPrefix 지정할 수도 있습니다.

 loures () {
    this.urlpRefix = 'https : //devenv.ourapp.example';
    this.get ( '/tasks', () => {... ...});
}

이를 통해 Mirage와 실제 API 사이의 원활한 전환이 가능합니다.

결론

MirageJS는 API 조롱을위한 간소화 된 클라이언트 측 솔루션을 제공하여 외부 프로세스 또는 서버 측 지식이 필요하지 않습니다. 사용 편의성과 강력한 기능은 프론트 엔드 개발자에게 유용한 도구입니다. 보다 고급 기능 및 튜토리얼은 공식 MirageJS 문서를 참조하십시오. 작업 예제는 Github에서 찾을 수 있습니다.

위 내용은 기다리지 마십시오! API를 조롱하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!