<ul id="qooak"></ul>

<fieldset id="qooak"></fieldset>

<ul id="qooak"></ul>

fetch 從初識到應用

Amio 發布于2019-08-20 18:11 / 1766人閱讀

摘要：是基于進行實現的對應兼容包兼容服務的兼容中的這個不用解釋了吧轉換為，要和對象中的保持一致，調用對應的返回一個對象以上代碼的解釋該值代表中是否攜帶到服務器端默認值，不攜帶到服務器允許從當前域下攜帶到服務器端，相對應服務器端的

fetch是基于promise進行實現的
對應npm兼容包：

          node-fetch      //兼容node服務的fetch
          iso-whatwg-fetch    //兼容safari中的fetch

eg:

    fetchData(){
        fetch(url, {
            method: "post",    //這個不用解釋了吧
            body: JSON.stringify(data),   //轉換為json，要和header對象中的ContentType保持一致
            headers: {
                "Content-Type": "application/json"   
            },
            credentials: "include" ，  
            mode： "cors"
    
        }).then((response) => response.json())
    }

調用對應的fecthData返回一個promise對象
eg：

    fetchData().then((data) => {
          you can do everything on data
     })

以上代碼的解釋：
credentials: "include"|‘omit’ | "same-origin"

   //該值代表request中是否攜帶cookie到服務器端
   //omit : 默認值，不攜帶cookie到服務器
   //same-origin:  允許從當前域下攜帶cookie到服務器端，相對應服務器端的this.set("Access-Control-Allow-Credentials", true)
   //include:  允許攜帶all-sites下的cookie到服務器端，服務器端要設置相應的Allow-Credentials
mode: "no-cors" | "cors"
   //該值代表當前請求是否可以跨域
   //no-cors: 默認值， fetch默認是不跨域的
   //cors: 可以發送跨域請求，相對應服務器端的 this.set("Access-Control-Allow-Origin", this.get("Origin") || "*");

fetch包含的常用對象：

new Request() 
new Response()
new Headers()

這三個對象可以具體應用到fetch中：
將上面的例子可以改寫;

fetchData() {
    let header = new Headers({
        "Content-Type": "application/json"  
        })
    let request = new request({
        method: "post",    //這個不用解釋了吧
        body: JSON.stringify(data),   //轉換為json，要和header對象中的ContentType保持一致
        headers: header,   //聲明的header對象
        credentials: "include" ，  
        mode： "cors"
    })
    fetch(url, request).then((response) => response.json())   //less code,更加明了
}

云服務器 GPU云服務器從域名到網站 spark從入門到前端從入門到精通云計算從入門到精通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84180.html

初識fetch

摘要：后面可以跟對象，表示等待才會繼續下去執行，如果被或拋出異常則會被外面的捕獲。沒有獲取狀態方法，標準沒有提供獲取當前狀態或者的方法。只允許外部傳入成功或失敗后的回調。這種進度通知的功能還沒有用過，暫不知道如何替代。始終不是很懂fetch的作用，然后查了很多資料，看了一篇不錯的文章，結合自己之前學習的Promise，然后做一篇文章，稍微記錄一下。傳統 Ajax 已死，Fetch 永生雖...

rickchen 2019-08-20 14:49 評論0 收藏0
初識React(9)：dva簡介

摘要：初始值，優先級低于傳給的，如下此時，在后為以格式定義。用于處理同步操作，唯一可以修改的地方。由觸發，可以觸發，可以和服務器交互，可以獲取全局的數據等等。取消注冊，清理和。如果沒有返回函數，使用會給予警告注冊路由表。前言 dva 首先是一個基于 redux 和 redux-saga 的數據流方案，然后為了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以...

keke 2019-08-23 14:08 評論0 收藏0
基于 Generator 和 Iterator 的惰性列表

摘要：在某些不定長度的列表操作上，惰性列表會讓代碼和結構更靈活。方法本身是立即執行的，如果滿足條件，這里的方法會執行兩次。結語和是帶給我們的非常強大的語言層面的能力，它本身的求值可以看作是惰性的。初識 Lazy List 如果有了解過 Haskell 的朋友，對下面的這些表達一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...

superw 2019-08-23 12:09 評論0 收藏0
用高階函數實現地址的延遲搜索

摘要：原文高階函數在中高階函數實際上就是控制函數的函數，有別于普通函數傳遞變量，高階函數傳遞的是函數，并且輸出函數這對于初學者來說足夠燒腦，也足夠驚艷。初識時常常會被被震撼了，原來函數還可以這么用這是設計模式與開發實踐的單例模式的一個高階函數。原文高階函數在javascript中高階函數實際上就是控制函數的函數，有別于普通函數傳遞變量，高階函數傳遞的是函數，并且輸出函數這對于js初學...

Nosee 2019-08-21 11:34 評論0 收藏0
fetch:不一樣的xhr請求

摘要：無論請求成功與否，它都返回一個對象，對應請求的。可選一個配置項對象，包括所有對請求的設置。注意或方法的請求不能包含信息。只讀請求所關聯的對象。使用一個對象來讀取流中的數據，并將狀態改為已使用。 fetch初識此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改...

cheng10 2019-08-20 18:25 評論0 收藏0