ajax，fetch，axios测试用例

最新推荐文章于 2025-06-18 13:23:59 发布

原创最新推荐文章于 2025-06-18 13:23:59 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

面试总结

88 篇文章

订阅专栏

本文探讨了在Web开发中常用的三种异步数据请求库——AJAX, Fetch和Axios的使用，并提供了详细的测试用例。通过比较它们的API、性能和兼容性，帮助开发者更好地理解何时选择哪种技术。" 112803838,10548502,VSCode调试Apache Doris BE：CentOS环境配置与步骤,"['Apache Doris', 'VSCode', '调试工具', 'CentOS', '大数据框架']

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body></body>
  <script>
    // ajax请求，需引用jq
    $.ajax({
      url: 'https://www.apiopen.top/novelSearchApi?name=盗墓笔记',
      type: 'GET',
      // ajax请求添加自定义header参数
      // beforeSend: function (XMLHttpRequest) {
      //   XMLHttpRequest.setRequestHeader("Authorization", "mDahwnj2ZfZA1T9pYQlFBzAs+uD8BtMDes9t6NviodTqE1ZCIjrfdB==")
      // },
      success: function(res) {
        console.log(res)
      },
      error: function(err) {
        console.log(err)
      }
    })
    $.ajax({
      url: 'http://172.20.1.105:8080/admin/manager/getManager',
      type: 'post',
      contentType: 'application/json; charset=utf-8', //如果想以json格式把数据提交到后台的话，这个必须有，否则只会当做表单提交
      data: JSON.stringify({
        //JSON.stringify()必须有,否则只会当做表单的格式提交
        managerAccount: '21191614028',
        managerPassword: '123'
      }),
      dataType: 'json', //期待返回的数据类型
      success: function(res) {
        console.log(res)
      },
      error: function(err) {
        console.log(err)
      }
    })
    // fetch请求 什么都不需要引入   这么好用的东西，ie竟然完全不支持（垃圾ie毁我青春！！）
    let data = '盗墓笔记'
    fetch(`https://www.apiopen.top/novelSearchApi?name=${data}`)
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(e => console.log('Oops, error', e))

    // axios请求，需引用axios
    axios
      .get(`https://www.apiopen.top/novelSearchApi?name=${data}`)
      .then(function(response) {
        console.log(response)
      })
      .catch(function(error) {
        console.log(error)
      })
  </script>
</html>