axios

時間 2019-12-11

標籤 axios 简体版

原文原文鏈接

GET請求不一樣方式結果不一樣前端

官方文檔咱們能夠看到的示例demo以下：webpack

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

// 或者是使用對象的方式填寫params參數
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
上面的示例代碼看起來是同樣的，其實有個細節仍是不同的，就是使用第二種方式會對參數值執行encodeURIComponent。web

看個人一段代碼：npm

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

// 或者是使用對象的方式填寫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請求的發送app

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

在官方文檔中是這樣描述的，若是在瀏覽器端須要發送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標籤的底部

<body>

那麼我若是我想使用CMD規範或者是ES6 的import呢？咱們可使用url-search-params-polyfill

參考文檔後，若是咱們想要使用CMD規範：

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

ES6的寫法

import 'url-search-params-polyfill';

也能夠直接在Html標籤中直接引用：