摘要:读取并处理返回的,得出一个化的。这个处理是异步处理,所以返回是一个另外本身是个异步操作,得到的自然也是一个。使用创建一个资源,往往需要认证,需要把认证放在的里,把创建数据放到的里,发过去。如果返回的结果是格式的数据,还需把里的的值写成
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创建一个资源,往往需要认证,需要把认证token放在request的header里,把创建数据放到request的body里,发过去。token要放到header的"Authorization" field里,并且前面要加"Bearer "类型标示。创建数据往往放到FormData里,再把formData放倒body里。
如果返回的结果是json格式的数据,还需把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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82250.html
摘要:我们看下把重复代码封装成一个的示例代码这里假设我们项目请求头固定这两个判断返回没有错误使调用可读性更好以上封装了一个,调用的时候如下对结果进行处理通过传递回调函数的方式,可读性性不是很好当然这是一个仁者见仁的问题。 调用 ajax 取请求后端数据是项目中最基础的功能。但是如果每次直接调用底层的浏览器 api 去发请求则非常麻烦。现在来分析一下怎么封装这一层,看看有哪些基础问题需要考虑。...
摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...
摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...
摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...
摘要:支持请求响应拦截器。定位与目标的定位是成为请求的终极解决方案。拦截器支持请求响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理。 Fly.js 是一个功能强大的轻量级的javascript http请求库,同时支持浏览器和node环境,通过适配器,它可以运行在任何具有网络能力的javascript运行环境;同时fly.js有一些高级的玩法如全局ajax拦截、在web a...
阅读 2937·2023-04-25 17:46
阅读 3561·2021-11-25 09:43
阅读 1045·2021-11-18 10:02
阅读 3026·2021-10-14 09:43
阅读 2731·2021-10-13 09:40
阅读 1508·2021-09-28 09:35
阅读 2143·2019-08-30 15:52
阅读 3120·2019-08-30 14:06