资讯专栏INFORMATION COLUMN

使用Fetch API和Promise来调用Restful接口进行POST

Ryan_Li / 1162人阅读

摘要:读取并处理返回的,得出一个化的。这个处理是异步处理,所以返回是一个另外本身是个异步操作,得到的自然也是一个。使用创建一个资源,往往需要认证,需要把认证放在的里,把创建数据放到的里,发过去。如果返回的结果是格式的数据,还需把里的的值写成

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,得出一个json Object化的response。这个处理是异步处理,所以返回是一个Promise.另外fetch本身是个异步操作,得到的Response自然也是一个Promise。)

Restful API Design

使用POST创建一个资源,往往需要认证,需要把认证token放在request的header里,把创建数据放到request的body里,发过去。token要放到header的"Authorization" field里,并且前面要加"Bearer "类型标示。创建数据往往放到FormData里,再把formData放倒body里。

如果返回的结果是json格式的数据,还需把header里的"Accept" field的值写成"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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82250.html

相关文章

  • 前端项目请求层封装过程

    摘要:我们看下把重复代码封装成一个的示例代码这里假设我们项目请求头固定这两个判断返回没有错误使调用可读性更好以上封装了一个,调用的时候如下对结果进行处理通过传递回调函数的方式,可读性性不是很好当然这是一个仁者见仁的问题。 调用 ajax 取请求后端数据是项目中最基础的功能。但是如果每次直接调用底层的浏览器 api 去发请求则非常麻烦。现在来分析一下怎么封装这一层,看看有哪些基础问题需要考虑。...

    bbbbbb 评论0 收藏0
  • fetch 如何请求数据

    摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

    MarvinZhang 评论0 收藏0
  • fetch 如何请求数据

    摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

    Betta 评论0 收藏0
  • fetch 如何请求数据

    摘要:四请求常见数据格式接下来将介绍如何使用请求本地文本数据,请求本地数据以及请求网络接口。请求网络接口获取中的数据,做法与获取本地的方法类似得到数据后,同样要经过处理 一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方...

    jzman 评论0 收藏0
  • JS HTTP 请求终极解决方案 - fly.js

    摘要:支持请求响应拦截器。定位与目标的定位是成为请求的终极解决方案。拦截器支持请求响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理。 Fly.js 是一个功能强大的轻量级的javascript http请求库,同时支持浏览器和node环境,通过适配器,它可以运行在任何具有网络能力的javascript运行环境;同时fly.js有一些高级的玩法如全局ajax拦截、在web a...

    OpenDigg 评论0 收藏0

发表评论

0条评论

Ryan_Li

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<