欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

fetch跨域問(wèn)題的使用詳解

 更新時(shí)間:2022年09月15日 10:01:40   作者:?jiǎn)葱歉哒? 
這篇文章主要介紹了fetch跨域問(wèn)題的使用詳解,fetch 的核心主要包括:Request , Response , Header , Body,利用了請(qǐng)求的異步特性 --- 它是基于 promise 的,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

一、介紹

fetch 提供了一個(gè)獲取資源的接口 (包括跨域)。

fetch 的核心主要包括:Request , Response , Header , Body

利用了請(qǐng)求的異步特性 --- 它是基于 promise 的

1.作用:fetch這個(gè)API, 是專(zhuān)門(mén)用來(lái)發(fā)起Ajax請(qǐng)求的;

fetch('/url').then(data=>{
    return data.text();
}).then(ret=>{
    //注意,這里才是得到的最終數(shù)據(jù)
    console.log(ret);
});

2.fetch是由原生JS提供的API,專(zhuān)門(mén)用來(lái)取代XHR這個(gè)對(duì)象的;

 fetch("請(qǐng)求的url地址")
  .then(response => res.json() )
  .then(data => console.log(data))
  //注意: 第一個(gè).then 中獲取到的不是最終數(shù)據(jù),而是一個(gè)中間的數(shù)據(jù)流對(duì)象;
  // 注意: 第一個(gè)  .then 中獲取到的數(shù)據(jù), 是一個(gè) Response 類(lèi)型對(duì)象;
  // 注意: 第二個(gè) .then 中,獲取到的才是真正的 數(shù)據(jù);

3.發(fā)起Get 請(qǐng)求

// 默認(rèn)  fetch("url") 的話, 發(fā)起的是 Get 請(qǐng)求
 fetch("url")
 .then(response => {
     //這個(gè) response  就是 服務(wù)器返回的可讀數(shù)據(jù)流, 內(nèi)部存儲(chǔ)的是二進(jìn)制數(shù)據(jù)
     // .json() 的作用,就是 讀取 response 這個(gè)二進(jìn)制數(shù)據(jù)流,并把 讀取到的數(shù)
     //  據(jù),轉(zhuǎn)為 JSON 格式的Promise 對(duì)象
     return response.json()
  })
  .then(data => {
           //這離  第二個(gè) .then 中拿到的 data, 就是最終的數(shù)據(jù)
     console.log(data)
  })

4.發(fā)起Post請(qǐng)求

var sendDate = new URLSearchParams()
 sendDate.append("name",'ls')
 sendDate.append("age", 30)

 fetch("url", {
   method: "post",
   body: sendDate  //要發(fā)給服務(wù)器的數(shù)據(jù)
 })
 .then(response => response.json())
 .then(data => console.log(data))
fetch(URL, {
            method: 'post',
            body:JSON.stringify(obj),
            headers:{
                'Content-Type': 'application/json'
            }
        })
        .then(function (response) {
            return response.text();
        })
        .then(function (myJson) {
            alert(myJson);
        });

到此這篇關(guān)于fetch跨域問(wèn)題的使用詳解的文章就介紹到這了,更多相關(guān)fetch跨域問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何實(shí)現(xiàn)瀏覽器上的右鍵菜單

    如何實(shí)現(xiàn)瀏覽器上的右鍵菜單

    如何實(shí)現(xiàn)瀏覽器上的右鍵菜單...
    2006-07-07
  • js+vml創(chuàng)建3D頁(yè)面效果代碼

    js+vml創(chuàng)建3D頁(yè)面效果代碼

    js vml制作的3D效果
    2008-02-02
  • Bootstrap每天必學(xué)之導(dǎo)航條(二)

    Bootstrap每天必學(xué)之導(dǎo)航條(二)

    Bootstrap每天必學(xué)之導(dǎo)航條,進(jìn)一步向大家講解了導(dǎo)航條養(yǎng)殖,以及導(dǎo)航條中元素的使用方法,感興趣的小伙伴們可以參考一下
    2016-03-03
  • js操作textarea 常用方法總結(jié)

    js操作textarea 常用方法總結(jié)

    在DOM里面操作textarea里面的字符,是比較麻煩的,本文將介紹一種比較簡(jiǎn)單的方法,需要的朋友可以參考下
    2012-12-12
  • uniapp實(shí)現(xiàn)附近商家定位的示例代碼

    uniapp實(shí)現(xiàn)附近商家定位的示例代碼

    本文主要介紹了uniapp實(shí)現(xiàn)附近商家定位的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 使用JS解析excel文件的完整實(shí)現(xiàn)步驟

    使用JS解析excel文件的完整實(shí)現(xiàn)步驟

    解析excel文件是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 如何用js獲得當(dāng)前視頻播放的狀態(tài)

    如何用js獲得當(dāng)前視頻播放的狀態(tài)

    這篇文章主要給大家介紹了關(guān)于如何用js獲得當(dāng)前視頻播放狀態(tài)的相關(guān)資料,大家在日常應(yīng)用場(chǎng)景中可能會(huì)遇到這么一個(gè)情況,需要判斷用戶是否完整的觀看完了一部視頻,需要的朋友可以參考下
    2023-07-07
  • JS定時(shí)器實(shí)例

    JS定時(shí)器實(shí)例

    在javascritp中,有兩個(gè)關(guān)于定時(shí)器的專(zhuān)用函數(shù)
    2013-04-04
  • JS實(shí)現(xiàn)百度搜索框

    JS實(shí)現(xiàn)百度搜索框

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度搜索框,實(shí)時(shí)返回搜索建議項(xiàng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • 刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)

    刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)

    本篇文章只要是對(duì)刷新頁(yè)面的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,包括JS與ASP.NET。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01

最新評(píng)論