前端ajax fetch axios请求

作者: 子不语静守花开 | 来源:发表于2019-03-28 16:21 被阅读0次

前端网络请求
React中的“ajax”
前端ajax fetch axios请求
Vue数据请求
React中的数据请求
Vue项目集成Axios支持Restful调用
【vue学习】axios
前端进阶（2）使用fetch/axios时，如何取消http请
前端技术月报201910期
关于与服务器交换数据的方法大全

<!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>前端不同请求方法</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
   */
    // get请求
    $.ajax({
      url: 'https://www.apiopen.top/novelSearchApi?name=盗墓笔记',
      type: 'GET',
      success: function(res) {
        console.log(res)
      },
      error: function(err) {
        console.log(err)
      }
    })
   // post请求
    $.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完全不支持
  */
    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>

感谢作者：https://blog.csdn.net/qq_43258252/article/details/86591636