Skip to main content

前端常见的请求方式

四月, 2022 · 预计阅读时间： 4 分钟

前端JS

XHR 请求​

XHR 作为兼容性最好的纯数据请求方式(即平常说的 ajax 请求)，应该是前端数据请求用的最多的方式。

早期 jQuery 的 $.ajax 还是现在流行的 axios，底层原理其实都是 new XMLHttpRequest()。

xhr 可以原生支持异步请求，数据使用回调的方式进行处理，写法较繁琐。

var xhr = new XMLHttpRequest()
xhr.open('get', 'url', true)
xhr.send(null)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status == 200) {
      alert(xhr.responseText)
    }
  }
}

fetch​

fetch 是浏览器原生支持的，可以不用引用 http 的类库即可实现发送请求。

默认异步，想要实现同步效果需要借助 async await。

天然融合 promise，只有网络异常或跨域时才会 reject 掉。

fetch 配置请求是否携带 cookie 和接受服务端写入 cookie 是需要额外设置的 credentials。

fetch('url', {
  method: 'GET', // *GET, POST, PUT, DELETE
  body: '',
  headers: {
    'user-agent': 'Mozilla/4.0',
    'content-type': 'application/json'
  },
  credentials: 'include'
})
  .then(function (response) {
    return response
  })
  .then(function (response) {
    console.log(response)
  })

顺带提一句，fetch 中通过 AbortController 实例取消请求。

form 表单提交​

可以在提交表单时打开新窗口，并隐藏提交的表单数据。

文件上传。

注意 content-type 的不同，以及参数需要用 formData 类型。

function formPost(targetUrl, params, target = '_blank') {
  const form = document.createElement('form')
  form.style.display = 'none'
  form.method = 'post'
  form.action = targetUrl
  form.target = target

  for (let prop in params) {
    if (typeof params[prop] !== 'function') {
      let input = document.createElement('input')
      input.type = 'hidden'
      input.name = prop
      input.value = params[prop]
      form.append(input)
    }
  }

  document.body.appendChild(form) // 确保兼容性
  form.submit()
  document.body.removeChild(form)
  return false
}

图片的 src 请求​

HTML 中 img 标签，只要放置了 src 属性，就会发出请求。常用于加载一张图片用于显示或绘制画布。

重复的图片地址，所有浏览器都只请求一次。

let img = new Image()
img.onload = e => {
  console.log('图片加载完毕', e)
}
img.src = 'xx.xx'

iframe​

本身设计用于引用完整的外部网站

因为也会自动发起一次网络请求，并且可以支持随后发起一系列请求。

常见用于外部广告、Hybird 中原生与 H5 通信、后台管理系统。

script 标签的 src 属性​

这是前端的根本，加载一个 js 脚本，无论是模块化，还是分包都会用到切割 js，异步下载它。

不同的异步方式，加载执行的顺序会受浏览器影响。

静态前端库的专有 CDN 链接。

常见的跨域解决方案中的 JSONP 的解决方案也是通过 script 标签。

下载外部 css 样式文件

用于打点时原理类同于图片打点，都是会向服务器发出一次 get 请求。