js fetch api

时间:2023-03-10 03:41:49
js  fetch api

MDN

fatch

返回的对象

type string
url string
redirected boolean
status number
ok boolean
statusText string
headers object
body object
bodyUsed boolean
clone function arrayBuffer function
blob function
formData function
json function
text function

get 和 post

        get() {
let headers = new Headers();
headers.append('Content-Type', 'application/json'); let option = {
method: 'GET',
headers: headers,
mode: 'cors',
cache: 'default'
}; let request = new Request('/get', option);
fetch(request).then(res => res.json()).then(res => console.log(res)); post() {
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); let option = {
method: 'POST',
headers: headers,
mode: 'cors',
cache: 'default'
}; let request = new Request('/post', option);
fetch(request).then(res => res.json()).then(res => console.log(res)); }

rxjs的ajax

            rxjs.ajax.ajax.get('/get',{'content-type': 'application/json'})
.pipe(
rxjs.operators.map(res => res.response)
)
.subscribe(
v => { console.log(v) },
e => { console.log(e) },
() => { console.log('complete') }
); rxjs.ajax.ajax.post('/post',{'content-type': 'application/x-www-form-urlencoded;charset=utf-8'})
.pipe(
rxjs.operators.map(res => res.response)
)
.subscribe(
v => { console.log(v) },
e => { console.log(e) },
() => { console.log('complete') }
);

rxjs 包装 fetch

          let get$ = rxjs.from(fetch('/get', {
method: 'GET',
headers: headers
})) get$.pipe( rxjs.operators.mergeMap(res => rxjs.from(res.json())))
.subscribe(res => console.log( res))

并发请求

          let get$ = rxjs.from(fetch('/get', {
method: 'GET',
headers: headers
})) let get1$ = rxjs.from(fetch('/get1', {
method: 'GET',
headers: headers
})) let get2$ = rxjs.from(fetch('/get2', {
method: 'GET',
headers: headers
})) rxjs.merge(get$, get1$, get2$)
.pipe(
rxjs.operators.mergeMap(res => rxjs.from(res.json()))
)
.subscribe(res => console.log(res), err => console.error(err))