fetch 使用記錄

時間 2019-11-20

標籤 fetch 使用記錄简体版

原文原文鏈接

fetch api出來不少年了，因爲兼容性問題以前一直沒在項目中用到，最近作的項目只需兼容IE9+，把fetch引入了進來。目前用起來感受挺好的，簡潔。html

fetch 返回值是promise對象，對於不支持promise的須要引入promise-polyfill: https://www.npmjs.com/package/es6-promise-polyfill 。對於不支持fetch的須要引入fetch-polyfill :https://github.com/github/fetchgit

因爲fetch不支持jsonp, 若是須要使用jsonp, 能夠引入fetch-jsonp ：https://github.com/camsong/fetch-jsonp，其使用方式和fetch基本同樣。es6

//最簡單的使用方式：fetch(url, [options])， 對於get請求，參數需添加到url後面
fetch(url).then((response) => response.json()).then((response) => { console.log(response)})

fetch請求提供了很是靈活的配置github

1. 直接在options配置web

options.method //GET, POST, PUT, DELETE, HEAD
options.headers = 
{
    // 'Access-Control-Allow-Origin': '*',
    // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //application/json
    // 'Content-Type': 'multipart/formdata; charset=UTF-8' //application/json
},
options.credentials=include //容許請求發送cookie

options.body = new FormData(form)  //post請求

options.body = JSON.stringify(params) //post請求

2. 使用 new Headers()建立請求頭npm

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');

myHeaders.append('Custom-Header', 'CustomVal');

myHeaders.has('Content-Type');//true

myHeaders.get('Content-Type');//text/xml

myHeaders.set('Content-Type', 'application/json');

myHeaders.delete('Custom-Header');

//或直接以參數的形式建立

let myHeaders = new Headers({
    'Content-Type': 'application/json'
});

建立一個Request 對象來包裝請求頭：json

var myRequest = new Request(url,{
 headers:new Headers({
    
  })
});

fetch(myRequest).then((response)=>response.json)

能夠發現fetch和Request參數基本一致，能夠經過 Request() 和 Response() 的構造函數直接建立請求和響應，可是不建議這麼作。他們應該被用於建立其餘 API 的結果（mdn上說的）segmentfault

3. 響應api

Response 表明響應，fetch 的then 方法接受一個Response實例promise

response提升了不少屬性和方法，https://developer.mozilla.org/zh-CN/docs/Web/API/Response

其中常常會用到response.json() /response.text() ,返回一個promise對象。

let fetchFn = function (opts) {
    let options = {
            url : '', // 路徑
            method : 'GET', 
            params: {
                
            },
            headers : {
                 'Access-Control-Allow-Origin': '*',
                 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 
            },
            success(){},
            error(){} 
};
    options = extend(options, opts);
    let fetchParams = {
        method: options.method,
        headers: options.headers,
        credentials : 'include' //容許發送cookie 
    }
    if (options.method == 'GET'){
        options.url = toUrlParams(options.url, options.params); // 將參數拼接在url後面
    }else{
         fetchParams.body = JSON.stringify(options.params);
         if (options.form){
            fetchParams.body = new FormData(options.form)
        }
    }
    fetch(opts.url, fetchParams).then(response => response.json()).then(result => {
        if (result.code == 0){
            options.success(result);
        }else{
            options.error(result);
        }
    }).catch(e =>{
        console.log(' failed:', e)
    });
}