이 글에서는 Ajax와 fetch가 무엇인지 소개하겠습니다. Ajax와 가져오기의 차이점은 무엇입니까? , 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있으므로 도움이 되기를 바랍니다.
XMLHttpRequest 검토
전통적인 Ajax는 XMLHttpRequest(XHR):
var xhr = new XMLHttpRequest()
1을 참조합니다. 호출되는 첫 번째 메서드는 open()이며, open은 실제로 요청을 보내지 않습니다
xhr.open("get",url,false) //三个参数:请求方法,请求路径(相对于当前页面),是否异步请求
2. 호출되는 것은 send()입니다. 요청은 send
xhr.send(null) //参数:请求发送的主体数据
로 전송됩니다. 응답을 받은 후 반환된 데이터는 자동으로 XML DOM 문서
상태: 응답의 HTTP 상태
statusText에 채워집니다. : HTTP 상태 설명
비동기 요청을 보낼 때 일반적으로 XHR 객체의 ReadyStatus 값을 감지합니다.
1: 시작: open이 호출됨, send가 호출되지 않았습니다
3: Accept: 일부 데이터가 수신되었습니다
4: Complete: 수신됨 모든 데이터가 도착했습니다
load 이벤트onload 이벤트 핸들러는 이벤트 객체를 수신하고 대상 속성은 XHR 객체 인스턴스를 가리키므로 XHR 객체의 모든 메서드와 속성에 액세스할 수 있습니다.
XMLHttpRequest에는 관심사 분리 원칙이 없으며 구성 호출이 매우 혼란스럽습니다.
일반적인 작성 방법은 다음과 같습니다. var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
fetch가 나타납니다
현재 fetch 버전 지원 세부 사항은 다음과 같습니다 https://caniuse.com/#search=fetch
fetch 구문fetch의 API 요청에 대한 모든 설정을 포함하는 약속fetch(url, init).then(function(response) { ... });init 선택적 구성 개체를 기반으로 설계되었습니다. method
: 요청 방법, GET POST 등
: 요청 헤더 정보 Headers 객체 또는 ByteString 형식입니다. body: 요청된 본문 정보: Blob, BufferSource, FormData, URLSearchParams 또는 USVString 개체일 수 있습니다. GET 또는 HEAD 메소드 요청에는 본문 정보가 포함될 수 없습니다.
: 요청 모드, 아래 참조
: 기본적으로 fetch
는 사이트가 의존하는 경우 서버에서 쿠키를 보내거나 받지 않습니다. on 사용자 세션의 경우 인증되지 않은 요청이 발생합니다(쿠키를 보내려면 자격 증명 옵션을 설정해야 함).
생략
: 쿠키를 보내지 않습니다. same-origin
: URL과 응답 스크립트의 출처가 동일한 경우에만 쿠키, HTTP 기본 인증 및 기타 확인 정보를 보냅니다. . include
: 크로스 도메인 요청 여부에 관계없이 항상 요청된 리소스 도메인의 로컬 쿠키, HTTP 기본 인증 및 기타 확인 정보를 보냅니다. fetch
不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
omit
: 从不发送cookies.
same-origin
: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.
include
: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.
cache:请求的cache模式:default,no-store,no-cache,force-cache,only-if-cache
上例子中,可以看到response被转换为json,如果我们需要过去response的其他元信息,我们可以通过以下的方式:
fetch('./test.json').then(function(response) { console.log(response.headers.get('Content-Type'));//application/json console.log(response.headers.get('Date'));//Wed, 5 Sep 2018 09:33:44 GMT console.log(response.status);//200 console.log(response.statusText);//ok console.log(response.type);//basic console.log(response.url)//http://localhost:63342/Apple/test/test.json })
response.headers的方法:
has(name) (boolean)-判断是否存在该头部信息
get(name) (string)-获取头部信息
getAll(name) (Array)-获取所有的头部信息
set(name, value)- 设置信息头的参数
append(name, value)- 添加header内容
delete(name)- 删除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息
上例子中,可以看到 console.log(response.type);//basic
为basic。
当我们发送一个fetch请求的时候,response可能的返回值类型有"basic", "cors" or "opaque". 这些types
fetch('./test.json',{mode:'cors'}) .then(function(response) { console.log(response); return response.json(); }) .then(function(data) { console.log(data); }).catch(function(e) { console.log("Oops, error"); });🎜 🎜🎜response.headers 메소드: 🎜🎜🎜🎜
has(name) (boolean)-헤더 정보가 존재하는지 확인
🎜🎜🎜🎜get (이름) (문자열)-헤더 정보 가져오기
🎜🎜🎜🎜getAll(이름) (배열)-모든 헤더 정보 가져오기
🎜🎜🎜🎜set(이름, 값) -헤더 정보 설정 매개변수
🎜🎜🎜🎜append(이름, 값)-헤더 내용 추가
🎜🎜🎜🎜delete(이름)-헤더 정보 삭제
🎜🎜🎜🎜 forEach(function(value, name){ ... }, [thisContext]) - 헤더 정보를 읽는 루프
🎜🎜🎜🎜Response Type🎜🎜위의 예에서 다음을 수행할 수 있습니다. console.log(response.type);//basic
을 참조하세요. 🎜🎜가져오기 요청을 보낼 때 가능한 응답 값 유형은 "basic", "cors" 또는 "opaque"입니다. 이러한 유형
은 🎜🎜리소스 소스를 나타내고 Yu가 응답 객체로 무엇을 해야 할지 알려줍니다. 🎜🎜🎜🎜요청과 리소스가 동일한 소스에서 나온 경우 요청은 기본 유형이므로 제한 없이 응답의 모든 콘텐츠를 볼 수 있습니다🎜如果请求和资源是不同源的,并且返回一个CORs header的头部,那么请求是cors
类型。basic
和cors
响应基本相同。但是cors
会限制你查看header中“Cache-Control”,“Content-Language”,“Content-Type”,“Expires”,“Last-Modified”和`Pragma`的属性。
如果请求和资源是不同源的,并且不返回一个CORs header头部,那么请求是opaque
类型。opaque
类型的响应,我们不能过读取任何的返回值或者查看请求状态,这意味着我们无法只知道请求是成功还是失败。
你可以定fetch请求的模式,以便于解析一些模式,如下:
same-origin--同源请求才能成功,其他请求都会被拒绝
cors允许请求同源和其带有合适的CORs头部的其他源
cors-with-forced-preflight--发送真实的请求之前,需要一个预检验
no-cors--旨在向没有CORS header的其他源发出请求并产生不透明opaque的响应,但如上所述,目前在窗口全局范围内这是不可能的。
要定义模式,请在fetch请求中添加选项对象作为第二个参数,并在该对象中定义模式:
fetch('./test.json',{mode:'cors'}) .then(function(response) { console.log(response); return response.json(); }) .then(function(data) { console.log(data); }).catch(function(e) { console.log("Oops, error"); });
Promise的一个重要特征是链式调用。 对于fetch,这允许你通过fetch请求共享逻辑
fetch('./test.json') .then((response)=>{ if(response.status>=200||response.status<300){ return Promise.resolve(response); } else { return Promise.reject(new Error(response.statusText)) } }) .then((response)=>response.json()) .then((data)=>{ console.log("Response successful json data",data); }) .catch((e)=>{ console.log("Oops, error",e); });
首先定义关于status的方法去检验请求是否成功,并且返回Promise.resolve(response)
和Promise.reject(response)
来处理下一步的逻辑。
这样做的好处在于能够使得代码更好的维护,可读和测试
对于一个web应用,需要通过POST请求和在请求体中添加一些参数去请求API并不罕见
fetch(url, { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, body: 'foo=bar' }) .then(json) .then(function (data) { console.log('Response successful json data', data); }) .catch(function (error) { console.log('"Oops, error', error); });
目前没有方法去取消fetch请求,但是可以设置一个timeout选项https://github.com/whatwg/fetch/issues/20
首先实现一个abort功能,fetch返回的是一个promise对象,那么需要在abort后达到出入reject Promise的目的
var abort_fn = null; var abort_promise = new Promise((resolve,reject)=>{ abort_fn=()=>{ reject("abort promise") } })
可以通过调用abort_fn
来触发abort_promise
的reject
fetch返回的promise,称为fetch_promise,那么现在有两个promise:abort_promise
和 fetch_promise
由于每个promise都有reject和resolve回调绑定到哪个promise上呢?
可以采样Promise.race方法
Promise.race
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]); //上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。
基于Promise.race的特点,实现方案如下
const p = Promise.race([ fetch_promise, abort_promise ]); p .then(console.log) .catch(console.error);
实现代码
_fetch=(fetch_promise,timeout)=>{ var abort_fn = null; var abort_promise = new Promise((resolve,reject)=>{ abort_fn=()=>{ reject("abort promise") } }) //在这里使用Promise.race var p = Promise.race([ abort_promise, fetch_promise ]) setTimeout(()=>{ abort_fn(); },timeout) return p; } _fetch(fetch('./test.json'),5000) .then((res)=>{ console.log(res) },(err)=>{ console.log(err) })
fetch规范和Ajax主要有两个方式的不同:
当接收到一个代表错误的 HTTP 状态码时,从 fetch()
返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok
属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
默认情况下,fetch
不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。fetch(url, {credentials: 'include'})
omit
: 从不发送cookies.
same-origin
: 只有当URL与响应脚本同源才发送 cookies、 HTTP Basic authentication 等验证信息.
include
: 不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问AJAX视频教程!
相关推荐:
위 내용은 Ajax와 가져오기란 무엇인가요? 둘 사이의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!