一文详解JavaScript如何安全的进行数据获取

const res = await fetch('/user')
const user = await res.json()

try {
  const res = await fetch('/user')
  const user = await res.json()
} catch (err) {
  // 处理错误的代码
}

try {
  const res = await fetch('/user')
  if (!res.ok) {
    switch (res.status) {
      case 400: /* 错误处理 */ break
      case 401: /* 错误处理 */ break
      case 404: /* 错误处理 */ break
      case 500: /*错误处理 */ break
    }
  }
  // User 已经是我们最新的数据了
  const user = await res.json()
} catch (err) {
  // 错误处理
}

try {
  const res = await fetch('/user')
  if (!res.ok) {
    throw new Error('错误的响应')
  }
  const user = await res.json()
} catch (err) {
  // 错误处理
}

class ResponseError extends Error {
  constructor(message, res) {
    super(message)
    this.response = res
  }
}
try {
  const res = await fetch('/user')
  if (!res.ok) {
    throw new ResponseError('错误的响应信息（error的上下文信息）', res)
  }
  const user = await res.json()
} catch (err) {
  //我们可以拿到错误的详细信息，也就是error的上下文
  switch (err.response.status) {
    case 400: /* 错误处理 */ break
    case 401: /* 错误处理 */ break
    case 404: /* 错误处理 */ break
    case 500: /* 错误处理 */ break
  }
}

class ResponseError extends Error {
  constructor(message, res) {
    this.response = res
  }
}
export async function myFetch(...options) {
  const res = await fetch(...options)
  if (!res.ok) {
    throw new ResponseError('错误响应的信息', res)
  }
  return res
}

try {
  const res = await myFetch('/user')
  const user = await res.json()
} catch (err) {
  // 错误的处理代码
}

try {
  const { data } = await axios.get('/user')
} catch (err) {
  // 错误处理代码
}

import axios from 'redaxios'
// use as you would normally

const user = await wretch("/user")
  .get()
  // Handle error cases in a more human-readable way
  .notFound(error => { /* ... */ })
  .unauthorized(error => { /* ... */ })
  .error(418, error => { /* ... */ })
  .res(response => /* ... */)
  .catch(error => { /* uncaught errors */ })