전단 요청fetch에 대한 자세한 설명

선언:
여기에 설명이 필요합니다.fetch가 실행된 후에 하나의 프로미스 대상을 되돌릴 수 있기 때문에promise의 사용법을 알지 못하면 알아보셔도 됩니다.
왜fetch를 써야 합니까?전통적인 xhr로 두 개의 비동기 인터페이스를 순서대로 방문하는 장면을 생각해 보자. 첫 번째 인터페이스 접근이 실패하면 두 번째 인터페이스는 계속 진행할 수 없지만fetch로 이런 상황을 처리할 수 있다.
개발에 들어가다
우선 첫 번째 단계는 공식 문서의 설명에 따라, 우리는fetch 실행 매개 변수로 리퀘스트 대상을 만들어야 한다

const myRequest = new Request(url, init);  

혹은

const myRequest = new Request(requestJson);

그 중에서 URL은 요청 주소이고 init는 설정된 관련 속성이며 RequestJson은 Request 대상이며 이 두 파라미터는 비슷하다
method - 사용된 HTTP 동사, GET, POST, PUT, DELETE, HEAD URL - 요청 주소, URL of the request headers - 연관된 Header 객체 referrer - referrer mode - 요청 모드, 도메인 간 설정, cors, no-cors, same-origin credentials - Cookie omit, same-origin redirect - 리디렉션 요청을 받은 후 동작, follow, error,manual integrity - 무결성 검사cache - 캐시 모드 (default,reload,no-cache)
여기에 주의하자면 RequestJson과 init에는 하나의 모델 매개 변수가 있는데 요청 모드를 설정할 수 있다. 크로스 요청(no-cors: 파일을 요청할 때만 사용하고,cors: 크로스 필드는 앞뒤 헤더 정보를 설정해야 한다) 등 문제는 비교적 간편한 해결 방식이다.
서비스워커스를 사용할 때 리소스 대상을 새로 만들어야 할 수도 있지만, 일반적으로 만들 필요가 없습니다.

var response = new Response('...',{
    ok:false,
    status:404,
    url:'/'
})

다음은 기본fetch를 만듭니다

const req=new Request('http://hd2.nfapp.southcn.com/wx/getShareSignInfo',{method:'get',cache:false,mode:"no-cors"});

fetch(req).then((response)=>{
            console.log(response);
            if(response.ok)return response.json();
        }
).then((result)=>{
    console.log(result);
}).catch((e)=>{
    console.log(e);
});

여기에서 우리가 수신한 것은 백엔드 인터페이스의 회전 파라미터가 아니라 상태, 요청 유형과 회전 파라미터 등을 포함하는 json이다.
위쪽은 기본적인 요청입니다. 다음은 파라미터post와 get을 보내야 하는 방법의 차이를 살펴봅시다
get 방법
get 방법으로 전송하려면 url 헤더에 봉해야 한다는 것을 알고 있습니다. get 방법은body를 캐리어로 데이터를 전송하지 않기 때문에fetch의 사용은 다음과 같습니다. 우선 우리가 보내는 파라미터를 만듭니다.

let sendData=new URLSearchParams();// url 

매개 변수에 키, val 삽입

sendData.append("name",123);

그리고 저희가 요청한 파라미터의 URL에 파라미터를 추가해야 돼요.

const req=new Request('url?'+sendData,{method:'get',cache:false,mode:"no-cors"});

post 방법
post와 get 전삼은 다르다. post 방식으로 전삼을 하려면 파라미터를 바디에 추가해야 한다. 송신 파라미터를 만드는 방법도 다르지만 대동소이하여 코드에 직접 올린다.

let sendData=new formData();// 
sendData.append("name",123);

const req=new Request('url',{method:'get',cache:false,mode:"no-cors",body:sendData});

이로써fetch의 기본 요청이 완료되었습니다