資訊專欄INFORMATION COLUMN
摘要：讀取并處理返回的，得出一個化的。這個處理是異步處理，所以返回是一個另外本身是個異步操作，得到的自然也是一個。使用創(chuàng)建一個資源，往往需要認證，需要把認證放在的里，把創(chuàng)建數(shù)據(jù)放到的里，發(fā)過去。如果返回的結(jié)果是格式的數(shù)據(jù)，還需把里的的值寫成
Basic Concept Promise Overview
Promise is a js standard built-in object.
Promise is used for asynchronous computations.
A Promise represents a value which may be available now, or in the future, or never.
A Promise is in one of these states:
pending: initial state, not fulfilled or rejected.
fulfilled: meaning that the operation completed successfully.
rejected: meaning that the operation failed.
As the Promise.prototype.then() and Promise.prototype.catch() methods return promises, they can be chained.
Definition Syntaxnew Promise( /* executor */ function(resolve, reject) { ... });
executor
A function normally initiates some asynchronous work, and then, once that completes, either calls the resolve function to resolve the promise or else reject it if an error occurred.
If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.
Because the work is an asynchronous work, you may use XHR or Fetch in it.
Methodsreject(reason) - return a promise with the given reason.
resolve(value) - return a promise that is resolved with the given value. The value maybe a promise too, if it is, chain the result with then method again.
Prototype Methodsprototype.catch(onRejected) - onRejected is a callback function to handle the situation that is on rejected.
prototype.then(onFulfilled, onRejected) - OnRejected is as the below catch method. OnFulfilled is a callback function to handle the situation that is on fulfilled.
FormData OverviewThe FormData interface provides a way to easily construct a set of key/value pairs representing from fields and their values, which can then be easily sent using asynchronous way(XHR or Fetch).
It uses the same format a form would use if the encoding type were set to "multipart/form-data".
Definition ConstructorFormData()
Create a new FormData object.
append()
delete()
entries()
get()
getAll()
has()
keys()
set()
values()
Fetch API OverviewThe Fetch API provides an interface for fetching resources(including across the network).
It will seem familiar to anyone who has used XHR, but the new API provides a more powerful and flexible feature set.
Definition Interfaces
GlobalFetch
fetch()
Headers
Request
implement Body
Response
implement Body
Mixin
Body
json()
Takes a Response stream and reads it to completion.It returns a promise that resolves with a JSON object.(讀取并處理fetch返回的Response，得出一個json Object化的response。這個處理是異步處理，所以返回是一個Promise.另外fetch本身是個異步操作，得到的Response自然也是一個Promise。)
使用POST創(chuàng)建一個資源，往往需要認證，需要把認證token放在request的header里，把創(chuàng)建數(shù)據(jù)放到request的body里，發(fā)過去。token要放到header的"Authorization" field里，并且前面要加"Bearer "類型標示。創(chuàng)建數(shù)據(jù)往往放到FormData里，再把formData放倒body里。
如果返回的結(jié)果是json格式的數(shù)據(jù)，還需把header里的"Accept" field的值寫成"application/json".
WorkFlowGet token from localStorage to post a image by fetch API.(assume the token is there.)
Get the remote url of the image in response.
Show image.
Demohttps://jsfiddle.net/clemTheD...
ReferencePromise
Fetch
FormData
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82250.html
摘要：我們看下把重復代碼封裝成一個的示例代碼這里假設(shè)我們項目請求頭固定這兩個判斷返回沒有錯誤使調(diào)用可讀性更好以上封裝了一個，調(diào)用的時候如下對結(jié)果進行處理通過傳遞回調(diào)函數(shù)的方式，可讀性性不是很好當然這是一個仁者見仁的問題。 調(diào)用 ajax 取請求后端數(shù)據(jù)是項目中最基礎(chǔ)的功能。但是如果每次直接調(diào)用底層的瀏覽器 api 去發(fā)請求則非常麻煩?，F(xiàn)在來分析一下怎么封裝這一層，看看有哪些基礎(chǔ)問題需要考慮。...
摘要：四請求常見數(shù)據(jù)格式接下來將介紹如何使用請求本地文本數(shù)據(jù)，請求本地數(shù)據(jù)以及請求網(wǎng)絡(luò)接口。請求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類似得到數(shù)據(jù)后，同樣要經(jīng)過處理 一 序言 在 傳統(tǒng)Ajax 時代，進行 API 等網(wǎng)絡(luò)請求都是通過XMLHttpRequest或者封裝后的框架進行網(wǎng)絡(luò)請求,然而配置和調(diào)用方式非?；靵y，對于剛?cè)腴T的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...
摘要：四請求常見數(shù)據(jù)格式接下來將介紹如何使用請求本地文本數(shù)據(jù)，請求本地數(shù)據(jù)以及請求網(wǎng)絡(luò)接口。請求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類似得到數(shù)據(jù)后，同樣要經(jīng)過處理 一 序言 在 傳統(tǒng)Ajax 時代，進行 API 等網(wǎng)絡(luò)請求都是通過XMLHttpRequest或者封裝后的框架進行網(wǎng)絡(luò)請求,然而配置和調(diào)用方式非?；靵y，對于剛?cè)腴T的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...
摘要：四請求常見數(shù)據(jù)格式接下來將介紹如何使用請求本地文本數(shù)據(jù)，請求本地數(shù)據(jù)以及請求網(wǎng)絡(luò)接口。請求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類似得到數(shù)據(jù)后，同樣要經(jīng)過處理 一 序言 在 傳統(tǒng)Ajax 時代，進行 API 等網(wǎng)絡(luò)請求都是通過XMLHttpRequest或者封裝后的框架進行網(wǎng)絡(luò)請求,然而配置和調(diào)用方式非?；靵y，對于剛?cè)腴T的新手并不友好。今天我們介紹的Fetch提供了一個更好的替代方...
摘要：支持請求響應攔截器。定位與目標的定位是成為請求的終極解決方案。攔截器支持請求響應攔截器，可以通過它在請求發(fā)起之前和收到響應數(shù)據(jù)之后做一些預處理。 Fly.js 是一個功能強大的輕量級的javascript http請求庫，同時支持瀏覽器和node環(huán)境，通過適配器，它可以運行在任何具有網(wǎng)絡(luò)能力的javascript運行環(huán)境；同時fly.js有一些高級的玩法如全局ajax攔截、在web a...
閱讀 2975·2023-04-25 17:46
閱讀 3601·2021-11-25 09:43
閱讀 1103·2021-11-18 10:02
閱讀 3064·2021-10-14 09:43
閱讀 2785·2021-10-13 09:40
閱讀 1535·2021-09-28 09:35
閱讀 2197·2019-08-30 15:52
閱讀 3165·2019-08-30 14:06
