网络请求

axios 与 fetch 差异

JSON 数据序列化

axios 会自动将传入的数据转换为JSON数据格式,并会加上'application/json'请求头.fetch 需要手动序列化参数和添加请求头.

获取数据时,fetch 需要手动 json 而 axios 直接在 data 中获取.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
  </head>
  <body>
    <script>
      const data = JSON.stringify({
        name: 'fetch',
        age: 18,
      })
      const url = 'http://httpbin.org/post'

      axios
        .post(url, {
          name: 'axios',
          age: 18,
        })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => console.log(err))

      fetch(url, {
        method: 'post',
        body: data,
        headers: { 'Content-Type': 'application/json' },
      })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.log(err))
    </script>
  </body>
</html>

错误处理

在 Axios 中，如果请求发生错误，它将抛出一个异常，这使得错误处理变得更加直观和简单。您可以使用 try/catch 语句来捕获并处理这些异常。

取消请求(AbortController)

axios 和 fetch 的请求取消都用的是AbortController这个 api.(axios 的 CancelToken 从 v0.22.0 已经弃用.)

示例 fetch :

const controller = new AbortController()
const signal = controller.signal
const url = 'video.mp4'

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log('Download complete', response)
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`)
    })
}
// 取消请求,fetch 会抛出 AbortError
function Cancelrequest() {
  controller.abort()
}

你可以在 github 上找到完整的工作示例;你还可以看它的在线演示。

示例 axios :

axios 用法和 fetch 一样,区别在于取消请求时会抛出 CanceledError 错误.

axios
  .get(url, { signal })
  .then(function (success) {
    // handle success
  })
  .catch(function (error) {
    // handle error
  })

可以使用 controller 取消一个或多个请求。

提示

如上面 fetch 示例 controller 放到了请求外边,多次调用fetchVideo请求使用的是同一个 controller,所以调用controller.abort() 时,这些请求都会被取消.

相反,特定请求的取消,需要每次创建新的controller,并保存它.

const url = 'video.mp4'
let controller = null
function fetchVideo() {
  controller = new AbortController()
  const signal = controller.signal
  fetch(url, { signal })
    .then((response) => {
      console.log('Download complete', response)
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`)
    })
}
function Cancelrequest() {
  controller.abort()
}

axios 与 fetch 差异​

JSON 数据序列化​

错误处理​

取消请求(AbortController)​

示例 fetch :​

示例 axios :​