axios知識點總結

iOS122 發布于2019-08-21 16:45 / 1046人閱讀

摘要：概要最近的一個項目中使用了來代替來發送請求。在使用這兩種方式的時候可以注意一下，防止多一次造成后端接受參數錯誤。而且它的請求返回的是一個對象。我可以很方便的處理請求的結果。或者是使用來對進行編碼。說明中是這樣描述的。

概要

最近的一個項目中使用了axios來代替XMLHttpRequest來發送請求。也是遇到了一些問題。這里做下簡單的記錄。

GET請求不同方式結果不同

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

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

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

上面的示例代碼看起來是一樣的，其實有個細節還是不一樣的，就是使用第二種方式會對參數值執行encodeURIComponent。

看我的一段代碼：

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

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

在瀏覽器端測試后觀察請求的url的參數可以發現。

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

POST請求的發送

我主要是在瀏覽器端使用axios來發送請求。而且它的請求返回的是一個Promise對象。我可以很方便的處理請求的結果。

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

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

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

或者是使用qs來對url進行編碼。

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

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

這里說下使用polyfill會遇到的問題。官方推薦的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)。

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

比如在我們的body標簽的底部

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

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

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

ES6的寫法

import "url-search-params-polyfill";

也可以直接在Html標簽中直接引用：

云服務器 GPU云服務器 linux數據結構知識點總結位段知識總結 axios axios cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88675.html

axios使用心得總結

摘要：最近項目中使用也遇到了一些問題，就借此機會總結一下，如有錯誤，還請不吝指正。而在使用時對應的傳參使用的是，是作為請求體發送的，同樣使用這種形式的還有等請求方式。層在環境中可以使用。 Axios是一個基于Promise的 HTTP 庫，可以用在瀏覽器和node.js 中，因為尤大大的推薦，axios也變得越來越流行。最近項目中使用axios也遇到了一些問題，就借此機會總結一下，如有錯誤，...

Lowky 2019-08-21 17:50 評論0 收藏0
前端知識點總結——VUE（持續更新中）

摘要：前端知識點總結持續更新中框架和庫的區別框架有著自己的語法特點都有對應的各個模塊庫專注于一點框架的好處提到代碼的質量，開發速度提高代碼的復用率降低模塊之間的耦合度高內聚低耦合思維模式的轉換從操作的思維模式切換到以數據為主概述是一個漸進式的構建前端知識點總結——VUE（持續更新中） 1.框架和庫的區別：框架：framework 有著自己的語法特點、都有對應的各個模塊庫 library ...

big_cat 2019-08-22 14:50 評論0 收藏0
Vue.js中前端知識點總結筆記

摘要：框架和庫的區別框架有著自己的語法特點都有對應的各個模塊庫專注于一點框架的好處提到代碼的質量，開發速度提高代碼的復用率降低模塊之間的耦合度高內聚低耦合思維模式的轉換從操作的思維模式切換到以數據為主概述是一個漸進式的構建用戶界面的框架小到的簡單1.框架和庫的區別：框架：framework 有著自己的語法特點、都有對應的各個模塊庫 library 專注于一點框架的好處： 1.提到代碼的質...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0
element 上傳組件 el-upload 的經驗總結

摘要：正文上傳圖片到七牛云這個需要前后端的配合才能實現，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進度值谷歌找到的其一谷歌找到的其二完前言最近在做后臺管理項目，采用的 vue-element-admin ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結。初步總結下會提到的問題，目錄如下： el-upload 自定義上傳方法圖片上傳到七牛云圖片壓縮后再上傳（...

Neilyo 2019-08-26 10:24 評論0 收藏0