1. 程式人生 > >fetch()函數使用的一些技巧

fetch()函數使用的一些技巧

tor app gif json格式 eth charset set bubuko 認識

最近項目用到了一些es6的知識,其中大篇幅在vue框架中使用了fetch()函數,總結了一些使用的技巧:

一,

  1,POST帶參數)fetch提交json格式的數據到服務器:

 1 //fetch替換vue-resource
 2 let jsonData= {
 3 params1:‘param1_value‘,
 4 params2:‘param2_value‘
 5 };
6 fetch( 7 url(地址), 8 { 9  method: ‘POST‘, 10  credentials: ‘include‘, 11  headers: {(添加頭文件) 12   ‘Content-Type‘: ‘application/json;charset=UTF-8‘(指定數據類型和編碼)
,
13   ‘Authorization‘: ‘Bearer ‘ + localStorage.access_token(在請求信息中添加assess_token驗證碼), 14 }, 15 body: JSON.stringify(jsonData), 16 } 17 ).then(function(res){ 18    return res.json().then((data)=>{(返回的res為原生Promise對象,需要轉換) 19      console.log(data) 20    }) 21 }); 22 //end fetch替換vue-resource
2,GET帶參數)fetch提交json格式的數據到服務器:
 1 params1=‘param1_value‘ ; 2 params2=‘param2_value‘ ;
 3 
4 let url = ‘http://www.cnblogs.com‘+‘?param1=‘+param1_value+‘&param2=‘+param2_value; (get方式只能把參數拼接到url地址中進行傳遞)
5
6 fetch( 7 url(地址), 8 { 9  method: ‘GET‘, 10  credentials: ‘include‘, 11  headers: {(添加頭文件) 12   ‘Content-Type‘: ‘application/json;charset=UTF-8‘(指定數據類型和編碼)
,
13   ‘Authorization‘: ‘Bearer ‘ + localStorage.access_token(在請求信息中添加assess_token驗證碼), 14 }, 15 16 } 17 ).then(function(res){ 18    return res.json().then((data)=>{(返回的res為原生Promise對象,需要轉換) 19      console.log(data) 20    }) 21 }); 22 //end fetch替換vue-resource
  3,POST帶參數)提交正常表單formData格式的數據到服務器: 提交格式為: 技術分享圖片
1 <form action="。。。url地址。。。" method="post">
2     <input type=‘‘text" name="name" value="認識c語言">
3     <input type=‘‘text" name="cp_weight" value="0">
4 </form>

  4,POST帶參數)fetch提交自定義表單formData格式的數據到服務器: (在fetch下使用FormData對form表單元素進行數據封裝後進行post提交至服務器,其格式被轉為了WebKitFormBoundary模式,如下圖) 技術分享圖片

如果需要使用正常的formData格式提交,代碼如下:

 1 let formData = new FormData();
 2 formData.append(‘name‘ , ‘認識c語言‘);
 3 formData.append(‘cp_weight‘ , ‘0‘);
 4 fetch(‘url地址‘,{
 5      method: ‘POST‘,
 6      credentials: ‘include‘,
 7      headers: {
 8      // ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘,(這一句一定不能加,很多人容易忽略這個地方,否則就是上圖的WebKitFormBoundary格式數據)
 9      ‘Authorization‘: ‘Bearer ‘ + localStorage.access_token,
10               },
11     body: formData,
12     }).then(function(res){
13           return res.json().then((data)=>{
14            console.log(data);
15     })
16      });

fetch()函數使用的一些技巧