JS原生fetch请求

记录一下JS的原生fetch请求方式。

简介

JavaScript中的Fetch API进行HTTP请求。Fetch API是现代浏览器提供的一种用于进行网络请求的接口。

使用Fetch API，您可以通过发送HTTP请求从服务器获取数据或将数据发送到服务器。它提供了一种更简单、更强大的方式来执行网络请求，取代了传统的XMLHttpRequest（XHR）方法。

1. GET请求

const BaseUrl = 'https://****/api/'
/**
 * fetch请求 get
 */
async function get (url, data) {
  // 请求链接
  var request_url = BaseUrl + url
  // 拼接请求参数
  var param = ''
  if (data && data.length > 0) {
    data.forEach(e => {
      param += (e.name + '=' + e.value + '&')
    })
  }

  if (param !== '') {
    param = param.substring(0, param.length - 1)
    request_url = request_url + '?' + param
  }

  var response = {}
  var result
  try {
    response = await fetch(request_url)
    result = response.json()
  } catch (error) {
    return null
  }
  return result
}

2. POST请求

/**
 * fetch请求 post
 */
async function post (url, params) {
  // 请求链接
  var request_url = BaseUrl + url
  var response = {}
  var result
  try {
    response = await fetch(request_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    })
    result = response.json()
  } catch (error) {
    return null
  }
  return result
}

备注
如果是提交json数据时，需要把json转换成字符串。如

body: JSON.stringify(json)

如果提交的是表单数据，使用 formData转化下，如：

body: new FormData(form)

处理跨域

1. mode

设置请求头的mode属性为cors：在发送Fetch请求时，可以通过设置mode属性为cors来指示浏览器执行CORS（跨域资源共享）请求。这将允许跨域请求并使用服务器端的CORS策略。示例代码如下：

fetch('https://api.example.com/data', {
  mode: 'cors'
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

2. credentials

设置请求头的credentials属性为include：如果您的跨域请求需要发送身份凭证（如Cookies或HTTP认证），可以设置credentials属性为include。这将告诉浏览器在请求中包括凭证信息。示例代码如下：

fetch('https://api.example.com/data', {
  credentials: 'include'
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

参考文档： https://blog.csdn.net/weichushun/article/details/123043355