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

資訊專(zhuān)欄INFORMATION COLUMN

使用Fetch API和Promise來(lái)調(diào)用Restful接口進(jìn)行POST

Ryan_Li / 1290人閱讀

摘要：讀取并處理返回的，得出一個(gè)化的。這個(gè)處理是異步處理，所以返回是一個(gè)另外本身是個(gè)異步操作，得到的自然也是一個(gè)。使用創(chuàng)建一個(gè)資源，往往需要認(rèn)證，需要把認(rèn)證放在的里，把創(chuàng)建數(shù)據(jù)放到的里，發(fā)過(guò)去。如果返回的結(jié)果是格式的數(shù)據(jù)，還需把里的的值寫(xiě)成

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 Syntax 
new Promise( /* executor */ function(resolve, reject) { ... });
Parameters

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.

Methods

reject(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 Methods

prototype.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 Overview

The 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 Constructor

FormData()
Create a new FormData object.

Methods

append()

delete()

entries()

get()

getAll()

has()

keys()

set()

values()

Fetch API Overview

The 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，得出一個(gè)json Object化的response。這個(gè)處理是異步處理，所以返回是一個(gè)Promise.另外fetch本身是個(gè)異步操作，得到的Response自然也是一個(gè)Promise。)

Restful API Design

使用POST創(chuàng)建一個(gè)資源，往往需要認(rèn)證，需要把認(rèn)證token放在request的header里，把創(chuàng)建數(shù)據(jù)放到request的body里，發(fā)過(guò)去。token要放到header的"Authorization" field里，并且前面要加"Bearer "類(lèi)型標(biāo)示。創(chuàng)建數(shù)據(jù)往往放到FormData里，再把formData放倒body里。

如果返回的結(jié)果是json格式的數(shù)據(jù)，還需把header里的"Accept" field的值寫(xiě)成"application/json".

WorkFlow

Get 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.

Demo

https://jsfiddle.net/clemTheD...

Reference

Promise
Fetch
FormData

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82250.html

相關(guān)文章

  • 前端項(xiàng)目請(qǐng)求層封裝過(guò)程

    摘要：我們看下把重復(fù)代碼封裝成一個(gè)的示例代碼這里假設(shè)我們項(xiàng)目請(qǐng)求頭固定這兩個(gè)判斷返回沒(méi)有錯(cuò)誤使調(diào)用可讀性更好以上封裝了一個(gè)，調(diào)用的時(shí)候如下對(duì)結(jié)果進(jìn)行處理通過(guò)傳遞回調(diào)函數(shù)的方式，可讀性性不是很好當(dāng)然這是一個(gè)仁者見(jiàn)仁的問(wèn)題。 調(diào)用 ajax 取請(qǐng)求后端數(shù)據(jù)是項(xiàng)目中最基礎(chǔ)的功能。但是如果每次直接調(diào)用底層的瀏覽器 api 去發(fā)請(qǐng)求則非常麻煩。現(xiàn)在來(lái)分析一下怎么封裝這一層，看看有哪些基礎(chǔ)問(wèn)題需要考慮。...

    bbbbbb 評(píng)論0 收藏0

  • fetch 如何請(qǐng)求數(shù)據(jù)

    摘要：四請(qǐng)求常見(jiàn)數(shù)據(jù)格式接下來(lái)將介紹如何使用請(qǐng)求本地文本數(shù)據(jù)，請(qǐng)求本地?cái)?shù)據(jù)以及請(qǐng)求網(wǎng)絡(luò)接口。請(qǐng)求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類(lèi)似得到數(shù)據(jù)后，同樣要經(jīng)過(guò)處理 一 序言 在 傳統(tǒng)Ajax 時(shí)代，進(jìn)行 API 等網(wǎng)絡(luò)請(qǐng)求都是通過(guò)XMLHttpRequest或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請(qǐng)求,然而配置和調(diào)用方式非常混亂，對(duì)于剛?cè)腴T(mén)的新手并不友好。今天我們介紹的Fetch提供了一個(gè)更好的替代方...

    MarvinZhang 評(píng)論0 收藏0

  • fetch 如何請(qǐng)求數(shù)據(jù)

    摘要：四請(qǐng)求常見(jiàn)數(shù)據(jù)格式接下來(lái)將介紹如何使用請(qǐng)求本地文本數(shù)據(jù)，請(qǐng)求本地?cái)?shù)據(jù)以及請(qǐng)求網(wǎng)絡(luò)接口。請(qǐng)求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類(lèi)似得到數(shù)據(jù)后，同樣要經(jīng)過(guò)處理 一 序言 在 傳統(tǒng)Ajax 時(shí)代，進(jìn)行 API 等網(wǎng)絡(luò)請(qǐng)求都是通過(guò)XMLHttpRequest或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請(qǐng)求,然而配置和調(diào)用方式非常混亂，對(duì)于剛?cè)腴T(mén)的新手并不友好。今天我們介紹的Fetch提供了一個(gè)更好的替代方...

    Betta 評(píng)論0 收藏0

  • fetch 如何請(qǐng)求數(shù)據(jù)

    摘要：四請(qǐng)求常見(jiàn)數(shù)據(jù)格式接下來(lái)將介紹如何使用請(qǐng)求本地文本數(shù)據(jù)，請(qǐng)求本地?cái)?shù)據(jù)以及請(qǐng)求網(wǎng)絡(luò)接口。請(qǐng)求網(wǎng)絡(luò)接口獲取中的數(shù)據(jù)，做法與獲取本地的方法類(lèi)似得到數(shù)據(jù)后，同樣要經(jīng)過(guò)處理 一 序言 在 傳統(tǒng)Ajax 時(shí)代，進(jìn)行 API 等網(wǎng)絡(luò)請(qǐng)求都是通過(guò)XMLHttpRequest或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請(qǐng)求,然而配置和調(diào)用方式非常混亂，對(duì)于剛?cè)腴T(mén)的新手并不友好。今天我們介紹的Fetch提供了一個(gè)更好的替代方...

    jzman 評(píng)論0 收藏0

  • JS HTTP 請(qǐng)求終極解決方案 - fly.js

    摘要：支持請(qǐng)求響應(yīng)攔截器。定位與目標(biāo)的定位是成為請(qǐng)求的終極解決方案。攔截器支持請(qǐng)求響應(yīng)攔截器，可以通過(guò)它在請(qǐng)求發(fā)起之前和收到響應(yīng)數(shù)據(jù)之后做一些預(yù)處理。 Fly.js 是一個(gè)功能強(qiáng)大的輕量級(jí)的javascript http請(qǐng)求庫(kù)，同時(shí)支持瀏覽器和node環(huán)境，通過(guò)適配器，它可以運(yùn)行在任何具有網(wǎng)絡(luò)能力的javascript運(yùn)行環(huán)境；同時(shí)fly.js有一些高級(jí)的玩法如全局ajax攔截、在web a...

    OpenDigg 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<