fetch與axios的區別(fetch的真正用法)
首先不得不吐槽一下fetch的response機制了,真的太麻煩了,當我快放棄的時候,才真正懂得怎麼用
axios使用特別簡單
axios("http://xxx/xxx.json?a=123'").then((r)=>{
console.log(r)//這裡的r是響應結果
})
但是axios不支援jsonp就比較噁心了,不過我們可以引入jsonp模組,詳細使用前面blog或github和npm用法
另外不建議使用jq進行ajax,畢竟太大了。
而fetch感覺是上了一個檔次一樣,他與axios的區別是他的response是一個綜合各種方法的物件,並不是請求的資料,
我就犯了這樣的錯誤,搞得我都想放棄fetch了
不過感覺機制還是蠻不錯的,返回的是一個未處理的方法集合,我們可以通過這些方法得到我們想要的資料型別
如果我們想要json格式,就執行response.json(),如果我們想要字串就response.text()
而且這些函式是一個promise,想要後臺的資料需要.then才可以
例:fetch('http://xxx/xxx.json?a=123').then(res => {
res.json().then((r)=>{//或者res.text() console.log(r)//這裡就是處理完的後臺返回的json資料 })
})
另外可以引入fetch-jsonp,即支援fetch也支援fetchJsonp方法
不過這樣也是一個回撥函式,推薦以下的方法(使用return的方式)
1. 請求 json
另外jsonp只支援json,不支援字串text
fetchJsonp('https://sug.so.360.cn/suggest?word=c').then (function(r) {//fetchJsonp fetch('http://xxx/xxx.json?a=123').then(res => {
return res.json();//這是一個promise
}).then(res => {
console.log(res);//向後臺請求的資料
})
- 1
- 2
- 3
- 4
- 5
2. 請求文字
fetch('/xxx/page').then(res => {
return res.text();
}).then(res => {
console.log(res);
})
- 1
- 2
- 3
- 4
- 5
3. 傳送普通 json 資料
fetch('/xxx', {
method: 'post',
body: JSON.stringify({
username: '',
password: ''
})
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
4. 傳送form 表單資料
var form = document.querySelector('form');
fetch('/xxx', {
method: 'post',
body: new FormData(form)
});
- 1
- 2
- 3
- 4
- 5
5. 獲取圖片
fetch('/xxx').then(res => {
return res.blob();
}).then(res => {
document.querySelector('img').src = URL.createObjectURL(imageBlob);
})
- 1
- 2
- 3
- 4
- 5
6. 上傳
var file = document.querySelector('.file')
var data = new FormData()
data.append('file', file.files[0])
fetch('/xxx', {
method: 'POST',
body: data
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
封裝
require('es6-promise').polyfill();
require('isomorphic-fetch');
export default function request(method, url, body) {
method = method.toUpperCase();
if (method === 'GET') {
body = undefined;
} else {
body = body && JSON.stringify(body);
}
return fetch(url, {
method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body
}).then((res) => {
if (res.status >= 200 && res.status < 300) {
return res;
} else {
return Promise.reject('請求失敗!');
}
})
}
export const get = path => request('GET', path);
export const post = (path, body) => request('POST', path, body);
export const put = (path, body) => request('PUT', path, body);
export const del = (path, body) => request('DELETE', path, body);
相關推薦
SQL中varchar與Nvarchar區別(亂碼的出現)
varchar在SQL Server中是採用單位元組來儲存資料的,nvarchar是使用Unico來儲存資料的.中文字元儲存到SQL Server中會儲存為兩個位元組(一般採用Unico編碼),英文字元儲存到資料庫中,如果欄位的型別為varchar,則只會佔用一個位元
fetch與axios的區別(fetch的真正用法)
首先不得不吐槽一下fetch的response機制了,真的太麻煩了,當我快放棄的時候,才真正懂得怎麼用axios使用特別簡單axios("http://xxx/xxx.json?a=123'").then((r)=>{ console.log(r)//這裡的r是響
深度學習框架tensorflow學習與應用2(fetch and feed和訓練一元一次方程擬合示例 )
Fetch Fetch操作是指TensorFlow的session可以一次run多個op 語法: 將多個op放入陣列中然後傳給run方法 Feed Feed操作是指首先建立佔位符, 然後把佔位符放入op中. 在run op的時候, 再把要op的值傳進去,
mvn clean install 與 mvn install 的區別(為啥用clean)[轉]
原文點選這裡 之前寫程式碼的過程中曾經遇到過問題,用mvn install後,新改的內容不生效,一定要後來使用mvn clean install 才生效,由於之前沒有做記錄,以及記不清是什麼情況下才會出現的問題,於是想看看clean和不clean的區別。 就如大家知道的,maven在執
https與http區別(全站HTTPS來了!)
最近大家在使用百度、谷歌或淘寶的時候,是不是注意瀏覽器左上角已經全部出現了一把綠色鎖,這把鎖表明該網站已經使用了 HTTPS 進行保護。仔細觀察,會發現這些網站已經全站使用 HTTPS。同時,iOS 9 系統預設把所有的 http 請求都改為 HTTPS 請求。隨著網際網路的發展,現代網際網路正在逐
【js】 ajax 與 axios 區別 ajax 與 axios區別
ajax 與 axios區別 Ajax: Ajax 即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML),是指一種建立互動式網頁應用的網頁開發技術。 Ajax = 非同步 JavaScript 和
聊聊var與let 在window下面的區別(除開作用域)
style span win bsp info image 什麽 spa lob 關於let在window下面訪問時無法獲取到的原因: 先看代碼: var age = 29; let ages = 29; alert(window.age) alert(windo
HashMap與HashSet的區別(源於LeetCode2&3)
HashSet: HashSet實現了Set介面,它不允許集合中出現重複元素。當我們提到HashSet時,第一件事就是在將物件儲存在 HashSet之前,要確保重寫hashCode()方法和equals()方法,這樣才能比較物件的值是否相等,確保集合中沒有 儲存相同
svn與git的區別(個人使用體驗)
本人一直在用svn沒有接觸個git單純是為了想換個新技術才去瞭解的git因為認識不足,本文中可能會出現一些錯誤請諒解 *部分圖片資料取自於網路 版本管理工具的發展過程 1、GIT是分散式的而SVN不是 下圖為SVN的程式碼管理模式 下圖為GIT的程式碼管理模式 2、針
關於DCT與FFT區別(為什麼影象處理和音訊處理都使用DCT而不用FFT)
1、問題來源: 這些天在設計一個實時影象採集,處理,壓縮,usb傳輸到上位機顯示,然後在其他電腦上可以通過網路 觀察實時影象的系統。目前已經實現的USB到上位機的傳輸功能,影象採集處理功能。但是
oracle12c與之前版本的區別(僅供參考)
oracle12c與11g或者oracle10最大的區別是:oracle12c增加了CDB和PDB的概念。 CDB全稱為Container Database,中文翻譯為資料庫容器,PDB全稱為P
malloc()與 alloc()區別(轉)
C語言跟記憶體分配方式 (1) 從靜態儲存區域分配。記憶體在程式編譯的時候就已經分配好,這塊記憶體在程式的整個執行期間都存在。例如全域性變數,static變數。 (2) 在棧上建立。在執行函式時,函式內區域性變數的儲存單元都可以在棧上建立,函式執行結束時這些儲存單元自動被
類成員宣告與定義前加inline的區別(C++ inline 函式)
轉載自:http://www.cnblogs.com/berry/articles/1582702.html 參考:http://msdn.microsoft.com/zh-cn/library/windows/apps/bw1hbe6y.aspx 心得:關鍵字inline
Java中的位運算子與邏輯運算子的區別(&和&&,|和||)
位運算子 & 在運算中,計算機先判斷 & 兩邊的真假,然後才判斷整體的真假, 邏輯運算子 && 在運算中,如果計算機判斷出有一個為假時,就停止判斷, >
exit()與_exit()函式的區別(Linux系統中)
http://blog.chinaunix.net/uid-12461657-id-3140887.html 注:exit()就是退出,傳入的引數是程式退出時的狀態碼,0表示正常退出,其他表示非正常退出,一般都用-1或者1,標準C裡有EXIT_SUCCESS和EXIT
mongodb與mysql區別(超詳細)
MySQL是關係型資料庫。 優勢:在不同的引擎上有不同 的儲存方式。查詢語句是使用傳統的sql語句,擁有較為成熟的體系,成熟度很高。開源資料庫的份額在不斷增加,mysql的份額頁在持續增長。 缺點:在海量資料處理的時候效率會顯著變慢。Mongodb是非關係型資料庫(n
動態庫與靜態庫的區別(linux vs windows)
方法庫大體上可以分為兩類:靜態庫和動態庫(共享庫)。在windows中靜態庫是以 .lib 為字尾的檔案,動態庫是以 .dll 為字尾的檔案。在linux中靜態庫是以 .a 為字尾的檔案,共
web測試與app測試的區別 (轉自Rookie_C)
僅僅從功能測試的層面上來講的話,在流程和功能測試上是沒有區別的。那麼區別在哪裡呢? 我個人覺得就是由於載體不一樣,所以系統測試和一些細節可能會不一樣。 那麼我們就要先來了解,web和app的區別。 web專案,一般都是b/s架構,基於瀏覽器的,而app則是c/s的,必須
Git與SVN的區別(面試常問)
log 就是 開發者 sha-1 動作 等待 網絡問題 man 檢測 1、Git是分布式的,而SVN不是分布式的 2、Git把內容按元數據方式存儲,而SVN是按文件 3、Git沒有一個全局版本號,SVN有,目前為止這是SVN相比Git缺少的最大的一個特征 4、Git的
【模板】KMP與MP的區別(洛谷P3375)
sin pre define www. oid != http class %s 學KMP的時候巨佬說我這寫的是MP,仔細去查了查資料,才發現了區別。 洛谷這道題用KMP是解決不了的,KMP的nxt數組和MP的nxt數組略有不同。 https://www.cnblogs.c