关闭

TypeScript Fetch封装使用

时间: 2019-08-14阅读: 2747标签: Fetch

Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。 这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。


Fetch封装


import "whatwg-fetch";
// import { fetchjsonp } from 'fetch-jsonp';
import * as fetchJsonp from 'fetch-jsonp';
/**
 * @description: 枚举出请求数据格式类型
 * @param {type} 枚举类型
 * @return: 
 */
enum ContentType {
    json = 'application/json;charset=UTF-8',
    form = 'application/x-www-form-urlencoded; charset=UTF-8'
}
/**
 * @description: 枚举request请求的method方法
 * @param {type} 枚举类型
 * @return: 
 */
enum HttpMethod {
    get = 'GET',
    post = 'POST'
}
/**
 * @description: 声明请求头header的类型
 * @param {type} 
 * @return: 
 */
interface IHeader {
    Accept?: string;
    'Content-Type': string;
    [propName: string]: any;
}
/**
 * @description: 声明fetch请求参数配置
 * @param {type} 
 * @return: 
 */
interface IReqConfig {
    method?: string;
    credentials?: string;
    headers?: IHeader;
    body?:any;
}
interface IHttp {
    getFetch<R,P={}>(url: string, params?:P, options?:RequestInit): Promise<R>;
    // getFetchJsonp<R,P>(url: string, params?:P, options?:RequestInit): Promise<R>;
    postFetch<R,P={}>(url: string, params?:P): Promise<R>;
}
export default class HttpRequests implements IHttp {
    public handleUrl = (url: string) => (params:any):string => {
        if(params){
            let paramsArray = [];
            Object.keys(params).forEach((key) =>
                paramsArray.push(key + "=" + encodeURIComponent(params[key]))
            );
            if (url.search(/\?/) === -1) {
                typeof params === "object" ? (url += "?" + paramsArray.join("&")) : url;
            } else {
                url += "&" + paramsArray.join("&");
            }
        }
        return url;
    }
    
    public async getFetch<R, P={}>(url: string, params?:P, options?:RequestInit):Promise<R>{
        options = {
            method: HttpMethod.get,
            credentials: 'include',
            headers: {
                'Content-Type': ContentType.json
            } 
        }
        return await fetch(this.handleUrl(url)(params), options)
        .then<R>((response) => {
            if (response.ok) {
                return response.json();
            } else {
                // alert("服务器繁忙,请稍后再试!");
            }
        })
        .then<R>((response) => {
            // response.code:是与服务器端约定code:200表示请求成功,非200表示请求失败,message:请求失败内容
            if (response) {
                return response;
            } else {
                // 非 200,错误处理
                return response;
            }
        })
        .catch<R>((error) => {
            return error;
        });
    }
    public async postFetch<R, P={}>(url: string, params?: P):Promise<R> {
        let formData = new FormData();
        Object.keys(params).forEach((key) => formData.append(key, params[key]));
        let options: RequestInit = {
            method: HttpMethod.get,
            credentials: 'include',
            headers: {
                'Content-Type': ContentType.json
            },
            body: formData
        }
        return await fetch(url, options)
        .then<R>((response) => {
            if (response.ok) {
                return response.json();
            } else {
                // alert("服务器繁忙,请稍后再试;\r\nCode:" + response.status);
            }
        })
        .then<R>((response) => {
            // response.code:是与服务器端约定code:200表示请求成功,非200表示请求失败,message:请求失败内容
            return response;
        })
        .catch<R>((error) => {
            // alert("当前网络不可用,请检查网络设置!");
            return error;
        });
    }
}


使用

import HttpReq from './request';
const Http = new HttpReq();
export async function getFetch(url:string, params:any) {
    return Http.getFetch(url, params);
}
export async function postFetch(url:string, params:any) {
    return Http.postFetch(url, params);
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4687

关闭

fetch使用的常见问题及其解决办法

fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

Js中使用fetch进行异步请求

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题

Fetch使用

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。

fetch API

fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义

通过fetch发送 post 请求下载文件

最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现

fetch使用,ajax替代方案

Fetch 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

当fetch遇到302状态码,会发生什么?

当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

Fetch API速查表:9个最常见的API请求

对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?在本文中,我将列出9个最常见的Fetch API请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!