成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

axios知識(shí)點(diǎn)總結(jié)

iOS122 / 1124人閱讀

摘要：概要最近的一個(gè)項(xiàng)目中使用了來代替來發(fā)送請(qǐng)求。在使用這兩種方式的時(shí)候可以注意一下，防止多一次造成后端接受參數(shù)錯(cuò)誤。而且它的請(qǐng)求返回的是一個(gè)對(duì)象。我可以很方便的處理請(qǐng)求的結(jié)果?；蛘呤鞘褂脕韺?duì)進(jìn)行編碼。說明中是這樣描述的。

概要

最近的一個(gè)項(xiàng)目中使用了axios來代替XMLHttpRequest來發(fā)送請(qǐng)求。也是遇到了一些問題。這里做下簡單的記錄。

GET請(qǐng)求不同方式結(jié)果不同

官方文檔我們可以看到的示例demo如下：

// 直接在請(qǐng)求理解里面拼接參數(shù)get參數(shù)
axios.get("/user?ID=12345")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 或者是使用對(duì)象的方式填寫params參數(shù)
axios.get("/user", {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的示例代碼看起來是一樣的，其實(shí)有個(gè)細(xì)節(jié)還是不一樣的，就是使用第二種方式會(huì)對(duì)參數(shù)值執(zhí)行encodeURIComponent。

看我的一段代碼：

// 直接在請(qǐng)求理解里面拼接參數(shù)get參數(shù)
axios.get("/user?testurl=http://test.aaa.com")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 或者是使用對(duì)象的方式填寫params參數(shù)
axios.get("/user", {
    params: {
      testurl: "http://test.aaa.com"
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在瀏覽器端測試后觀察請(qǐng)求的url的參數(shù)可以發(fā)現(xiàn)。

第一種方式，沒有對(duì)參數(shù)進(jìn)行編碼。第二種方式可以看到對(duì)參數(shù)進(jìn)行了encodeURIComponent操作。所以在使用的過程中，如果我們的后端需要前端在傳遞參數(shù)前對(duì)某些參數(shù)進(jìn)行encodeURIComponent。在使用這兩種方式的時(shí)候可以注意一下，防止多encode一次造成后端接受參數(shù)錯(cuò)誤。

POST請(qǐng)求的發(fā)送

我主要是在瀏覽器端使用axios來發(fā)送請(qǐng)求。而且它的請(qǐng)求返回的是一個(gè)Promise對(duì)象。我可以很方便的處理請(qǐng)求的結(jié)果。

在官方文檔中是這樣描述的，如果在瀏覽器端需要發(fā)送post請(qǐng)求，需要使用URLSearchParams。

var params = new URLSearchParams();
params.append("param1", "value1");
params.append("param2", "value2");
axios.post("/foo", params);

但是在官方文檔中也很明確的說明了URLSearchParams不是支持所有的瀏覽器的。我們需要使用polyfill來兼容一些低版本的瀏覽器。

或者是使用qs來對(duì)url進(jìn)行編碼。

// npm install qs --save or  yarn add qs

var qs = require("qs");
axios.post("/foo", qs.stringify({ "bar": 123 }));

這里說下使用polyfill會(huì)遇到的問題。官方推薦的polyfill是url-search-params。說明中是這樣描述的：

Note that URLSearchParams is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment)。

當(dāng)我們的使用webpack或者是fis3開發(fā)的 時(shí)候默認(rèn)都是把npm依賴作為依賴包來處理的。這里的global其實(shí)就是讓我們不要把這個(gè)文件作為一個(gè)Npm依賴包，而且直接引入到我們的Html中。

比如在我們的body標(biāo)簽的底部

那么我如果我想使用CMD規(guī)范或者是ES6 的import呢？我們可以使用url-search-params-polyfill

參考文檔后，如果我們想要使用CMD規(guī)范：

require("url-search-params-polyfill");

ES6的寫法

import "url-search-params-polyfill";

也可以直接在Html標(biāo)簽中直接引用：

           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88675.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    axios使用心得總結(jié)
    
                                                     
    摘要：最近項(xiàng)目中使用也遇到了一些問題，就借此機(jī)會(huì)總結(jié)一下，如有錯(cuò)誤，還請(qǐng)不吝指正。而在使用時(shí)對(duì)應(yīng)的傳參使用的是，是作為請(qǐng)求體發(fā)送的，同樣使用這種形式的還有等請(qǐng)求方式。層在環(huán)境中可以使用。

Axios是一個(gè)基于Promise的 HTTP 庫，可以用在瀏覽器和node.js 中，因?yàn)橛却蟠蟮耐扑]，axios也變得越來越流行。最近項(xiàng)目中使用axios也遇到了一些問題，就借此機(jī)會(huì)總結(jié)一下，如有錯(cuò)誤，...
    
                                                   
                          
    
                                
    
                                    Lowky
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端知識(shí)點(diǎn)總結(jié)——VUE（持續(xù)更新中）
    
                                                     
    摘要：前端知識(shí)點(diǎn)總結(jié)持續(xù)更新中框架和庫的區(qū)別框架有著自己的語法特點(diǎn)都有對(duì)應(yīng)的各個(gè)模塊庫專注于一點(diǎn)框架的好處提到代碼的質(zhì)量，開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個(gè)漸進(jìn)式的構(gòu)建

前端知識(shí)點(diǎn)總結(jié)——VUE（持續(xù)更新中）
1.框架和庫的區(qū)別：
框架：framework 有著自己的語法特點(diǎn)、都有對(duì)應(yīng)的各個(gè)模塊庫 library ...
    
                                                   
                          
    
                                
    
                                    big_cat
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Vue.js中前端知識(shí)點(diǎn)總結(jié)筆記
    
                                                     
    摘要：框架和庫的區(qū)別框架有著自己的語法特點(diǎn)都有對(duì)應(yīng)的各個(gè)模塊庫專注于一點(diǎn)框架的好處提到代碼的質(zhì)量，開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個(gè)漸進(jìn)式的構(gòu)建用戶界面的框架小到的簡單1.框架和庫的區(qū)別：


框架：framework 有著自己的語法特點(diǎn)、都有對(duì)應(yīng)的各個(gè)模塊庫 library 專注于一點(diǎn)
框架的好處：

1.提到代碼的質(zhì)...
    
                                                   
                          
    
                                
    
                                    番茄西紅柿
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    基于vue項(xiàng)目的知識(shí)總結(jié)
    
                                                     
    摘要：前言用有一段時(shí)間了，從用搭建項(xiàng)目一步步配置，到之后的研究動(dòng)效這些，一直想寫些東西記錄一下做個(gè)總結(jié)，剛好趁著有空就整理一下。結(jié)語有新的知識(shí)點(diǎn)會(huì)更新到知識(shí)體系中，總結(jié)和心得體會(huì)會(huì)單獨(dú)寫文章詳述，努力填坑

前言
用vue有一段時(shí)間了，從用vue-cli搭建項(xiàng)目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動(dòng)效這些，一直想寫些東西記錄一下、做個(gè)總結(jié)，剛好趁著...
    
                                                   
                          
    
                                
    
                                    tianlai
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    element 上傳組件 el-upload 的經(jīng)驗(yàn)總結(jié)
    
                                                     
    摘要：正文上傳圖片到七牛云這個(gè)需要前后端的配合才能實(shí)現(xiàn)，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進(jìn)度值谷歌找到的其一谷歌找到的其二完

前言
最近在做后臺(tái)管理項(xiàng)目，采用的 vue-element-admin ，上傳圖片是一個(gè)很常用的功能，也遇到了很多問題，剛好趁此機(jī)會(huì)做一些總結(jié)。
初步總結(jié)下會(huì)提到的問題，目錄如下：

el-upload 自定義上傳方法
圖片上傳到七牛云
圖片壓縮后再上傳（...
    
                                                   
                          
    
                                
    
                                    Neilyo
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<