vue3(四)-基础入门之 fetch 与 axios

本文介绍: 3.Ax ios 默认返回 JSON 格式的数据，而 Fetc h 返回的是 Resp on s e 对象，需要自己通过 Resp on s e 的方法（如 json()、text() 等）将结果转换成所需的格式。4.Ax ios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetc h 的错误处理比较繁琐，需要手动检查 Resp on s e.ok 属性。2.Ax ios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetc h 目前不支持这些功能。// 2.axios post请求。// p os t 请求。

一、fetch

1、axios和fetch的区别

Ax io s 和 Fetc h 都是 Jav aSc rip t 中用于发送 HTTP 请求的 API，它们的主要区别在以下方面：

1.Ax io s 支持更广泛的浏览器和 No de.js 版本，而 Fetc h 只能在较新的浏览器中使用，或需要使用 p oly fill 兼容旧版浏览器。
2.Ax io s 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fe t ch 目前不支持这些功能。
3.Ax io s 默认返回 JSON 格式的数据，而 Fe t ch 返回的是 Resp on s e 对象，需要自己通过 Res p onse 的方法（如 json()、text() 等）将结果转换成所需的格式。
4.Ax ios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fe t ch 的错误处理比较繁琐，需要手动检查 Res p onse.ok 属性。
5.fetch是原生 js 自带的，axios是封装的原生的xhr

以上文字参考链接

2.fetch 基本使用

第一个 t hen 返回一个 res p on d 对象，第二个 then 可以获取返回数据
fetch 请求默认是不带 cookie 的，需要设置 fetch(url,(c redentai ls:”include))

<script&gt;
      //  get请求
      fetch('./lib/test.json')
         .then(res =&gt; res.json())
         .then(datas =&gt; console.log(datas.students))

      // post 请求
      fetch('./users', {
        method: 'post',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'age = 22'
      })
        .then(res =&gt; res.json())
        .then(datas =&gt; console.log(datas))
</script>

3.axios 基本使用

//cdn 导入
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> -->
<script>
      // axios get请求
      axios.get('./lib/test.json').then(res => {
        console.log(res.data.students)
      })

	// 1.axios post请求
	axios.post('./users', {
          age: 22,
          name: 'zs'
        })
        .then(res => {
          console.log(res.data)
        })
        .catch(error => console.error(error))

      // 2.axios post请求
      axios({
        method: 'post',
        url: './sers',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        timeout: 2000, // 超时时间
        data: {
          age: '19',
          name: 'zs'
        }
      })
        .then(res => {
          console.log(res.data)
        })
        .catch(error => console.error('请求超时'))

</script>