fetch概述以及请求方式

Posted 2020-11-16 zengfanjie

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 对象)。