Fetch请求的简易封装

Posted 2023-02-22 前端薛小帅

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"
)