Deno의 로컬fetch에서 비동기 처리 연습

연습

비동기 처리를 배우면 자주 볼 수 있다fetch 등 처리.
비동기 처리된 API 등의 학습fetch으로서의 연습 등일지라도 fetch의 대상 데이터에 대해서는 공개된 API 등을 찾아야 하고 횟수 제한 등을 의식해 간단하게 테스트하기는 어렵다.또 노드야.js 등 환경에서 표준적으로 사용할 수 없기 때문에 node-fetch 등 외부 프로그램 라이브러리npm install가 필요합니다.

Deno Fetch

이에 따라 쉽게 연습할 수 있는 물건으로 디노의 내부 API 제공fetch이 주목받고 있다.
https://deno.land/[email protected]/runtime/web_platform_apis#fetch-api
현대 JavaScript/TypeScript의 실행 시간 Deno에서 웹 호환 API를 사용할 수 있습니다.웹 API인 Fetch API를 직접 사용할 수 있습니다.
Fetch API 외에도 웹 호환성 API가 많은데 다음 공식 블로그에서도 호환성을 설명한다.
https://deno.com/blog/every-web-api-in-deno#fetch-request-response-and-headers
Denofetch의 장점은 로컬 파일을 만들지 않아도 되는 로컬 서버 등이다.
Deno v1.16file:에서 프로젝트에서 가능fetch을 지원하기 때문에 간단하게 처리할 서버가 없습니다.
!
여기서 설명한 Deno의 기능은 다음 릴리즈에 있습니다.

❯ deno -V
deno 1.20.4

사용법

Deno는 절대 파일 URL만 지원하기 때문에 fetch("./some.json")와 같은 상대 경로fetch는 작동하지 않습니다.
따라서 우리도 웹 API의 URL인 API의 URL() 구조기와 import.meta를 사용하여 절대 파일 URL을 만든다.
https://doc.deno.land/deno/stable/~/ImportMeta
https://doc.deno.land/deno/stable/~/URL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import.meta
https://developer.mozilla.org/ja/docs/Web/API/URL URL() 구조기의 첫 번째 파라미터에 상대 경로, 두 번째 파라미터에 기초 URL을 추가하여 URL을 구축할 수 있다.import.meta.url를 통해 이 모듈의 절대 파일 URL을 얻을 수 있습니다.

// このファイルの場所から相対パス
const relativePath = "./testTextFile/textForFetch.txt";
const localUrl = new URL(relativePath, import.meta.url).toString();

이렇게 하면 localUrl에서 file:///Users/roshi/Development/Testing/understanding-async/deno-async/testTextFile/textForFetch.txt와 같은 file:로 시작하는 절대 파일 URL을 얻을 수 있다.toString()를 사용하여 문자열화하는 이유는 URL 대상을 Denofetch()의 매개 변수로 Deno의 인에 넣으면 Deno의 인기에 "URL 대상은 추천하지 않으므로 문자열 또는 Request를 사용하십시오"라고 알릴 수 있기 때문이다.
그런 다음 상대 경로에 지정된 위치에 적합한 텍스트 파일을 준비합니다.
testTextFile/textForFetch.txt

In laboris aliquip pariatur aliqua officia veniam quis aliquip. Dolor eu magna reprehenderit pariatur pariatur labore officia. Sit irure et excepteur dolor. Minim tempor nisi nulla veniam mollit. Esse elit aute reprehenderit id minim non et anim non id. Quis sunt elit labore officia voluptate cillum incididunt labore mollit ea adipisicing dolor eiusmod. Veniam cupidatat mollit occaecat mollit ullamco.

그런 다음 URL 문자열을 fetch() 메서드의 첫 번째 매개변수에 전달하고 Promise 체인을 통해 순차적으로 처리합니다.

const relativePath = "./testTextFile/textForFetch.txt";
const localUrl = new URL(relativePath, import.meta.url).toString();

console.log("sync process 1");

fetch(localUrl)
  .then((response) => {
    if (!response.ok) {
      throw new Error("Error");
    }
    console.log(`got data from "${localUrl}"`);
    return response.text();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error.message);
  });

console.log("sync process 2");

실제 집행.Deno는 기본적으로 파일 읽기와 쓰기 등에 대한 보안 설정deno run을 실행할 때 권한 표시가 필요합니다.
이번에는 파일의read를 진행하기 위해 --allow-read 실행 표지의 파일 이름 앞에 실행을 입력하십시오 (파일 이름 뒤에는 명령행 매개 변수로 식별되어 권한 표지로 사용할 수 없습니다. 주의하십시오.

❯ deno run --allow-read denoFetchLocal.js
sync process 1
sync process 2
got data from "file:///Users/roshi/Development/Testing/understanding-async/deno-async/testTextFile/textForFetch.txt"

In laboris aliquip pariatur aliqua officia veniam quis aliquip. Dolor eu magna reprehenderit pariatur pariatur labore officia. Sit irure et excepteur dolor. Minim tempor nisi nulla veniam mollit. Esse elit aute reprehenderit id minim non et anim non id. Quis sunt elit labore officia voluptate cillum incididunt labore mollit ea adipisicing dolor eiusmod. Veniam cupidatat mollit occaecat mollit ullamco.

순조롭게fetch 서류를 얻었다.
파일 읽기 자체fetch 방법 외에도 Deno.readTextFile 등 실행시간 API를 사용하는 방법도 있는데 이번에fetch 사용법을 소개했다.
https://qiita.com/access3151fq/items/48e17d1363de39d01ad1
그나저나 비동기 처리와 Promise 체인의 기초, azu의'JavaScript Primer'
길을 잃지 않기 위한 입문서"라고 알기 쉽게 추천한다.
https://jsprimer.net/basic/async/
https://jsprimer.net/use-case/ajaxapp/promise/