国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

axios知識點總結(jié)

iOS122 / 1039人閱讀

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

概要

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

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

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

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

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

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

看我的一段代碼：

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

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

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

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

POST請求的發(fā)送

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

在官方文檔中是這樣描述的，如果在瀏覽器端需要發(fā)送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開發(fā)的 時候默認都是把npm依賴作為依賴包來處理的。這里的global其實就是讓我們不要把這個文件作為一個Npm依賴包，而且直接引入到我們的Html中。

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

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

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

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

ES6的寫法

import "url-search-params-polyfill";

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88675.html

相關(guān)文章

  • axios使用心得總結(jié)

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

    Lowky 評論0 收藏0

  • 前端知識點總結(jié)——VUE（持續(xù)更新中）

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

    big_cat 評論0 收藏0

  • Vue.js中前端知識點總結(jié)筆記

    摘要：框架和庫的區(qū)別框架有著自己的語法特點都有對應(yīng)的各個模塊庫專注于一點框架的好處提到代碼的質(zhì)量，開發(fā)速度提高代碼的復(fù)用率降低模塊之間的耦合度高內(nèi)聚低耦合思維模式的轉(zhuǎn)換從操作的思維模式切換到以數(shù)據(jù)為主概述是一個漸進式的構(gòu)建用戶界面的框架小到的簡單1.框架和庫的區(qū)別： 框架：framework 有著自己的語法特點、都有對應(yīng)的各個模塊庫 library 專注于一點 框架的好處： 1.提到代碼的質(zhì)...

    番茄西紅柿 評論0 收藏0

  • 基于vue項目的知識總結(jié)

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

    tianlai 評論0 收藏0

  • element 上傳組件 el-upload 的經(jīng)驗總結(jié)

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

    Neilyo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<