前端临床手扎——简单易用的fetch

xingqiba 发布于2019-08-22 10:46 / 2706人阅读

摘要：如题，新增的真的简单易用，感觉现在这一个支持完全可行。虽然兼容性问题还是存在，但是打上后就基本解决了。来自使用简单使用这里说明一下，必须配合一起使用，这会得到更佳效果。

如题，es6 新增的fetch真的简单易用，感觉现在这一个支持完全可行。

虽然兼容性问题还是存在，但是打上polyfill后就基本解决了。

Browser Support

Chrome
Firefox
Safari 6.1+
Internet Explorer 10+

来自：github / fetch

使用 简单使用

这里说明一下，fetch必须配合promise一起使用，这会得到更佳效果。

# 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:{}}

跨域

跨域问题并不难只需加上 mode:"cors" 参数，如：

# 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,
        // 设为跨域请求
        mode:"cors"
    }
).then(res => res.json).then(console.log).catch(console.error);

想详细了解,请记住CORS关键词并看这里

你可能还需要...

想使用起来更舒心，你还得引用以下这两个包解决兼容：

es6-promise

url-search-params

具体使用例子：

# api.js

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

// 此判断在某些浏览器并不能正常检查，导致URLSearchParams不可用，如果你知道具体问题联系以下博主
//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 || "未知请求错误！");
            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);
    },
    // 发送手机验证短信
    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)
    }
}

GPU云服务器云服务器前端简单吗前端开发简单吗 fetch和axios的区别学前端开发简单还是后端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91211.html

前端临床手札——文件上传

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。先说一下需求和功能点：需求：上传文件到服务器功能：上传单这么...

SexySix 2019-08-19 18:07 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

_Zhao 2019-06-21 16:15 评论0 收藏0
前端临床手札——webpack构建逐步解构（上）

摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下前言由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，...

lowett 2019-08-22 10:36 评论0 收藏0