随笔 - 156  文章 - 0  评论 - 3  阅读 - 10万

JS — fetch封装

复制代码
function request(url, options = {}) {
  const defaultOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    body: null,
  };

  const requestOptions = { ...defaultOptions, ...options };

  return fetch(url, requestOptions)
    .then(response => {
      const contentType = response.headers.get('content-type');
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      } else if (contentType && contentType.includes('application/json')) {
        return response.json();
      } else {
        return response.text();
      }
    })
    .catch(error => {
      console.error('请求失败:', error);
      throw error;
    });
}

// 使用示例
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';

// 发起GET请求
request(apiUrl)
  .then(data => {
    console.log('GET请求成功:', data);
  })
  .catch(error => {
    console.error('GET请求失败:', error);
  });

// 发起POST请求
const postData = {
  title: 'foo',
  body: 'bar',
  userId: 1,
};
const postOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(postData),
};
request(apiUrl, postOptions)
  .then(data => {
    console.log('POST请求成功:', data);
  })
  .catch(error => {
    console.error('POST请求失败:', error);
  });

//将默认的请求选项定义为一个对象,并且在用户提供的选项和默认选项之间进行合并。
//根据响应的内容类型来决定是解析为JSON格式还是纯文本格式。
复制代码

 

posted on   萬事順意  阅读(204)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示