您好,欢迎来到欧得旅游网。
搜索
您的当前位置:首页Fetch请求的简易封装

Fetch请求的简易封装

来源:欧得旅游网
// 获取接口返回数据
const fetchRequest = (option = {}) => {
    const defaultOpt = {
      // 请求地址
      url: "",
      // 请求方式
      method: "get",
      // 请求头信息
      headers: {},
      // 其他参数
      other: {},
      // 接口参数
      data: {}
    }

    // 参数整合
    option = Object.assign({}, defaultOpt, option);

    // fetch请求参数
    const fetchOption = {
      headers: option.headers,
      method: option.method,
      ...option.other
    };

    // 处理请求方式
    if (option.method.toLowerCase() == "get") {
      // get方法将参数拼接在url后面
      const values = Object.values(option.data);
      const keys = Object.keys(option.data);
      const arr = [];
      for (let i = 0; i < values.length; i++) {
        arr.push(`${keys[i]}=${values[i]}`)
      }
      const str = arr.join("&");
      option.url += `?${str}`;
    } else if (option.method.toLowerCase() == "post") {
      // post请求将参数转为JSON字符串传给body
      fetchOption.body = JSON.stringify(option.data);
    }

    // 请求方法
    const fetchData = await fetch(option.url, fetchOption);
    const response = await fetchData.json();
    return response;
  }

// 调用
const res = await fetchRequest({
    url:"https://xxx.com/api/xxx"
})

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- ovod.cn 版权所有 湘ICP备2023023988号-4

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务