国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端臨床手扎——簡(jiǎn)單易用的fetch

xingqiba / 2707人閱讀

摘要：如題，新增的真的簡(jiǎn)單易用，感覺(jué)現(xiàn)在這一個(gè)支持完全可行。雖然兼容性問(wèn)題還是存在，但是打上后就基本解決了。來(lái)自使用簡(jiǎn)單使用這里說(shuō)明一下，必須配合一起使用，這會(huì)得到更佳效果。

如題，es6 新增的fetch真的簡(jiǎn)單易用，感覺(jué)現(xiàn)在這一個(gè)支持完全可行。

雖然兼容性問(wèn)題還是存在，但是打上polyfill后就基本解決了。

Browser Support

Chrome
Firefox
Safari 6.1+
Internet Explorer 10+
來(lái)自：github / fetch
使用 簡(jiǎn)單使用

這里說(shuō)明一下，fetch必須配合promise一起使用，這會(huì)得到更佳效果。

# get 
fetch("/api/user/1", {method: "GET"}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {id: 1, username: "Packy", email: "packy@uxfeel.com"}

# post
var formData = new FormData();
formData.append("username", "cathy");
formData.append("email", "cathy@uxfeel.com");

fetch("/api/user", {method: "POST", body: formData}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {code: "0", msg: "", data:{}}
跨域

跨域問(wèn)題并不難只需加上 mode:"cors" 參數(shù)，如：

# cross post
var formData = new FormData();
formData.append("username", "cathy");
formData.append("email", "cathy@uxfeel.com");

fetch(
    "http://192.168.1.120/api/user", 
    {
        method: "POST",
        body: formData,
        // 設(shè)為跨域請(qǐng)求
        mode:"cors"
    }
).then(res => res.json).then(console.log).catch(console.error);

想詳細(xì)了解,請(qǐng)記住CORS關(guān)鍵詞并看這里

你可能還需要...

想使用起來(lái)更舒心，你還得引用以下這兩個(gè)包解決兼容：

es6-promise

url-search-params

具體使用例子：

# api.js

require("es6-promise").polyfill();
require("fetch");

// 此判斷在某些瀏覽器并不能正常檢查，導(dǎo)致URLSearchParams不可用，如果你知道具體問(wèn)題聯(lián)系以下博主
//if ("searchParams" in HTMLAnchorElement.prototype) {
    var URLSearchParams = require("url-search-params");
//}

function handle(response){
    return new Promise(function(resolve, reject){
        if(response.status === 200){
            resolve(response.json())
        }else{
            var message = defaults.serverError[response.status];
            var e = new Error(message || "未知請(qǐng)求錯(cuò)誤！");
            e.response = response;
            reject(e);
        }
    });
}

module.exports = {
    // 登錄
    login: function(data){
        var url = "/user/login";

        var formData = new FormData();
        Object.keys(data).map(function(attr){
            formData.append(attr, data[attr]);
        })

        return fetch(url, {
            method: "POST",
            body: formData,
        }).then(handle).catch(handle);
    },
    // 發(fā)送手機(jī)驗(yàn)證短信
    sendCode: function(data){
        var url = "/user/sendCode";

        var params = new URLSearchParams("");
        Object.keys(data).map(function(attr){
            params.append(attr, data[attr]);
        })

        url+="?"+params.toString();

        return fetch(url, {
            method: "GET",
        }).then(handle).catch(handle)
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91211.html

相關(guān)文章

  • 前端臨床手札——文件上傳

    摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說(shuō)上傳這步估計(jì)是簡(jiǎn)單易入門，但是實(shí)際工作時(shí)就會(huì)發(fā)現(xiàn)上傳文件這個(gè)功能上是簡(jiǎn)單的，邏輯上卻比較復(fù)雜。 先說(shuō)一下需求和功能點(diǎn)： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...

    SexySix 評(píng)論0 收藏0

  • 前端臨床手札——在微信播放視頻的那些事

    摘要：然而我真的太天真，微信瀏覽器怎樣會(huì)讓你這樣好過(guò)問(wèn)題集中于自動(dòng)播放視頻這塊，需求很簡(jiǎn)單自動(dòng)播放全屏不顯示工具條自動(dòng)播放一步步來(lái)，自動(dòng)播放這個(gè)問(wèn)題在十分肯定默認(rèn)是不支持的，必須基于用戶操作下才能加載視頻。至于在微信下和一個(gè)樣。 某天收到舊同事的信息說(shuō)希望我?guī)褪肿鲆幌乱粋€(gè)簡(jiǎn)單的H5，然后我看了看的確很簡(jiǎn)單： 就是圖片滾動(dòng)到最后自動(dòng)播放視頻，播完顯示個(gè)按鈕交互。 然而我真的太天真，微信瀏覽器怎...

    _Zhao 評(píng)論0 收藏0

  • 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上）

    摘要：前言由于博主最近又閑下來(lái)了，之前覺(jué)得的官方文檔比較難啃一直放到現(xiàn)在。文章會(huì)逐步分析每個(gè)處理的用意當(dāng)然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會(huì)補(bǔ)上構(gòu)建生產(chǎn)的配置分析，案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來(lái)了，之前覺(jué)得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個(gè)webpack配置案例后覺(jué)得還是得自己寫個(gè)手腳架，當(dāng)然這個(gè)案例是基于vue的，...

    lowett 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<