关于请求数据的几种方式！！

一、ajax请求

    <script>
        // ajax发送的GET请求
        $.ajax({
            type: "GET",
            url: "test.js",
            dataType: "script"
        });
        // ajax发送的POST请求
        $.ajax({
            type: "POST",
            url: "some.php",
            data: "name=John&location=Boston",
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
        });
    </script>

二、Axios 请求

//具体来源网址https://www.kancloud.cn/yunye/axios/234845
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//执行 GET 请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//执行 POST 请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));


//可以通过向 axios 传递相关配置来创建请求

//axios(config)
// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});


//axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345');

三、axios中的请求(Promise)

<script src="./axios.min.js"></script>
  <script>
    /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {
      id: 1
    }}).then(res => res.data).then(data => {
      console.log(data)
    }) */
    
    function getArticleById (id) {
      axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}}).then(res => res.data).then(data => {
        console.log(data)
      }).catch(err => {
        console.log(err)
      })
    }

    getArticleById(2)

四、18_axios请求(async)

<script src="./axios.min.js"></script>
  <script>
    /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {
      id: 1
    }}).then(res => res.data).then(data => {
      console.log(data)
    }) */
    
    async function getArticleById (id) {
      /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}}).then(res => res.data).then(data => {
        console.log(data)
      }).catch(err => {
        console.log(err)
      }) */

      try {
        const res = await axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}})  // 如果是await则本身promise就不需要写后面then或catch

        // 对res进行处理即可
        console.log(res.data)
      } catch (err) {
        console.log(err)
      } 
    }

    getArticleById(5)