Fetch请求的简易封装

Fetch请求是原生JavaScript基于Promise封装的请求方式,请注意低版本浏览器的兼容问题

// 获取接口返回数据
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"
})

猜你喜欢

转载自blog.csdn.net/qq_41980461/article/details/127412146