前端数据请求/及mock

一，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>
    {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)

四，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)

mock总结

安装

npm install mockjs

// 使用 Mock

var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))