fetch概述以及请求方式

Posted zengfanjie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了fetch概述以及请求方式相关的知识,希望对你有一定的参考价值。

fetch

Fetch API 提供了一个 javascript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源

  • fetch规范与jQuery.ajax()主要有两种方式的不同:
  1. 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
  2. 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。自从2017年8月25日后,默认的credentials政策变更为same-originFirefox也在61.0b13中改变默认值
进行fetch请求

//fetch( url, config ).then().then().catch() methods: { get () { fetch(`${ BASE_URL }/get.php?a=1&b=2`)//get请求参数是连接在url上 .then( data => data.text() ) .then( res => { this.num = res }) .catch( err => console.log( err )) }, post () { /* 1. post请求参数如何携带 */ fetch(`${ BASE_URL }/post.php`,{ method: ‘POST‘, headers: new Headers({ ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ // 指定提交方式为表单提交 }), body: new URLSearchParams([["a", 1],["b", 2]]).toString() }).then( data => data.text() ) .then( res => { this.sum = res }) .catch( err => console.log( err )) }, getMovies () { /* 第一个then是为数据格式化,可以格式化的数据类型有: json text blob[ 二进制 ] 第二个then才是得到的数据 */ fetch(‘./mock/movie.json‘) .then( data => data.json() ) .then( res => { console.log("getMovies -> res", res) this.movies = res.movieList }) } }

  • 通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)。

以上是关于fetch概述以及请求方式的主要内容,如果未能解决你的问题,请参考以下文章

cors 与 fetch 以及何时发出选项请求时非常困惑

Vue全家桶之前后端交互

React Native探索使用fetch进行网络请求

Fetch使用

fetch简明学习

ajax、fetch 跨域携带cookie