> 웹 프론트엔드 > 프런트엔드 Q&A > nodejs 요청 캡슐화 변명

nodejs 요청 캡슐화 변명

WBOY
풀어 주다: 2023-05-11 13:07:38
원래의
726명이 탐색했습니다.

프런트엔드와 백엔드 분리의 인기로 인해 프런트엔드 엔지니어는 백엔드와 인터페이스해야 하는 필요성이 점점 더 커지고 있습니다. 이 과정에서 많은 엔지니어들은 네이티브 XMLHttpRequest 또는 fetch를 직접 사용하여 네트워크 요청을 수행하는 데 많은 문제가 있음을 발견했습니다. 따라서 이제 많은 프런트엔드 팀에서는 타사 요청 라이브러리를 사용하여 인터페이스를 요청합니다. 그중에서도 Node.js에서 개발한 요청 요청 라이브러리도 매우 인기가 높습니다.

이 기사에서는 Node.js의 요청 요청 라이브러리를 사용하여 인터페이스 요청을 캡슐화하여 프런트엔드 엔지니어가 인터페이스와 더 쉽고 빠르게 통신할 수 있는 방법을 소개합니다.

요청 라이브러리 설치

요청 라이브러리를 사용하기 전에 먼저 설치해야 합니다. 명령줄에서 npm 명령을 사용하여 설치할 수 있습니다.

npm install request --save
로그인 후 복사

Send a GET request

다음으로 요청 라이브러리를 사용하여 몇 가지 일반적인 요청을 보냅니다. 먼저 request.get() 메소드를 사용하여 GET 요청을 보내야 합니다.

const request = require('request');

request.get('https://api.github.com/', function(error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    }
});
로그인 후 복사

이 코드에서는 GitHub의 API에 액세스하여 홈페이지 콘텐츠를 얻습니다. 먼저 request.get() 메서드를 사용하여 GitHub API 주소를 매개변수로 전달하여 GET 요청을 보냅니다. 서버에 요청을 보내고 서버의 응답을 기다립니다.

서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다. 매개변수 error는 요청 과정에서 오류가 발생했는지 여부를 나타내고, response는 서버의 응답 헤더 정보를 나타내며, body는 서버 응답의 구체적인 내용을 나타냅니다.

이 코드에서는 먼저 if (!error && response.statusCode == 200)를 사용하여 오류가 발생했는지 확인합니다. 오류가 없으면 응답 내용이 인쇄됩니다.

POST 요청 보내기

다음으로 POST 요청을 보내겠습니다.

const request = require('request');

request.post({
    url: 'https://httpbin.org/post',
    form: {
        name: '张三',
        age: 18
    }
}, function(error, response, body) {
    if(!error) {
        console.log(body);
    }
});
로그인 후 복사

이 코드에서는 request.post() 메서드를 통해 POST 요청을 보내고 요청 주소와 요청 매개변수를 객체 형태로 전달합니다. 양식 매개변수는 POST 요청의 양식 데이터를 나타냅니다. 여기서는 이름 및 연령 필드를 전달합니다.

마찬가지로 서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다. 오류 및 response.statusCode를 판단하여 요청 성공 여부를 확인하고 응답 내용을 인쇄할 수도 있습니다.

JSON 데이터 보내기

오늘날의 프런트엔드 및 백엔드 분리 개발에서 매우 일반적인 요청 방법은 JSON 데이터를 보내는 것입니다. 다음은 JSON 데이터를 전송하기 위한 샘플 코드입니다.

const request = require('request');

const data = {
    name: '李四',
    age: 20
};

const options = {
    method: 'POST',
    url: 'https://httpbin.org/post',
    json: true,
    body: data
};

request(options, function(error, response, body) {
    if(!error) {
        console.log(body);
    }
});
로그인 후 복사

이 코드에서는 먼저 전송할 JSON 데이터를 나타내는 데이터 개체를 정의합니다. 그런 다음 옵션 매개변수를 통해 요청의 일부 매개변수를 구성합니다.

  • method는 요청 방법을 나타내며 여기서는 POST로 설정합니다.
  • url은 요청 주소를 나타내며 https://httpbin.org/post이기도 합니다.
  • json은 보내려는 데이터가 JSON 형식이라는 의미입니다.
  • body는 우리가 보내려는 특정 데이터입니다.

request() 메소드에서는 옵션 매개변수를 전달합니다. 이전 샘플 코드와 마찬가지로 서버가 응답하면 요청 라이브러리는 응답 정보를 콜백 함수에 전달합니다.

요청 전송 시 오류 처리

인터페이스 요청 과정에서 네트워크 연결 시간 초과, 요청 주소 없음 등 많은 오류가 발생할 수 밖에 없습니다. 다음은 오류 처리를 위한 샘플 코드입니다.

const request = require('request');

const data = {
    name: '李四',
    age: 20
};

const options = {
    method: 'POST',
    url: 'https://httpbin.org/post',
    json: true,
    body: data,
    timeout: 5000 // 设置请求超时时间
};

request(options, function(error, response, body) {
    if(error) {
        console.log('请求发生错误:', error);
    } else {
        if(response.statusCode == 200) {
            console.log('响应内容:', body);
        } else {
            console.log('请求失败,状态码:', response.statusCode);
        }
    }
});
로그인 후 복사

이 코드에서는 응답 없이 너무 오랜 시간이 걸리는 요청으로 인해 페이지가 중단되는 것을 방지하기 위해 먼저 요청 시간 초과를 나타내는 options.timeout 매개 변수를 설정했습니다. 오류가 발생하면 콜백 함수에서 console.log()를 사용하여 오류 메시지를 출력합니다. 오류가 없으면 응답 상태 코드를 판별합니다. 상태 코드가 200이면 응답 내용이 인쇄됩니다. 그렇지 않으면 요청 실패의 상태 코드를 인쇄합니다.

요청 인터페이스 기능 캡슐화

요청 라이브러리를 사용하여 인터페이스 요청을 할 때 너무 많은 반복 코드를 피하기 위해 일반적인 요청 방법을 캡슐화할 수 있습니다. 다음은 요청 인터페이스 함수를 캡슐화하는 샘플 코드입니다.

const request = require('request');

function requestApi(url, method, data) {
    const options = {
        method: method,
        url: url,
        json: true,
        timeout: 5000
    };

    if(method == 'GET') {
        options.method = 'GET';
    } else if(method == 'POST') {
        options.method = 'POST';
        options.body = data;
    } else if(method == 'PUT') {
        options.method = 'PUT';
        options.body = data;
    } else if(method == 'DELETE') {
        options.method = 'DELETE';
        options.body = data;
    }

    return new Promise(function(resolve, reject) {
        request(options, function(error, response, body) {
            if(error) {
                reject(error);
            } else {
                if(response.statusCode == 200) {
                    resolve(body);
                } else {
                    reject(response.statusCode);
                }
            }
        });
    });
}
로그인 후 복사

이 코드에서는 먼저 requestApi() 함수를 정의합니다. 여기에는 세 가지 매개변수가 포함됩니다.

  • url은 요청된 주소를 나타냅니다.
  • method는 요청된 메서드를 나타냅니다.
  • data는 요청된 데이터를 나타냅니다.

함수에서는 요청의 일부 구성 매개변수를 저장하는 옵션 개체를 정의합니다. 다양한 요청 방법에 따라 options.method 값과 options.body 값을 설정합니다.

그런 다음 비동기 처리를 위해 Promise를 사용합니다. request() 메소드의 콜백 함수에서 우리는 응답 내용을 전달하기 위해 해결()을 사용하고 오류 메시지와 상태 코드를 전달하기 위해 거절()을 사용합니다. Promise 개체의 then() 및 catch() 메서드를 사용하면 데이터를 요청한 후 해당 처리를 수행할 수 있습니다.

요약

Node.js의 요청 라이브러리를 사용하여 인터페이스를 요청하는 것은 매우 편리하고 빠른 방법입니다. 기본 XMLHttpRequest를 사용하거나 직접 가져옴으로써 발생하는 일부 문제를 피할 수 있으며 일부 일반적인 오류도 처리할 수 있습니다. 실제 필요에 따라 일반적인 요청을 함수로 캡슐화하고 프로젝트에서 호출하여 코드를 더욱 간결하고 이해하기 쉽게 만들 수 있습니다.

위 내용은 nodejs 요청 캡슐화 변명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿