初识 axios

最新推荐文章于 2022-07-28 20:28:38 发布

70kggg

最新推荐文章于 2022-07-28 20:28:38 发布

阅读量122

点赞数

分类专栏：前端之路文章标签： axios

本文链接：https://blog.csdn.net/weixin_42617604/article/details/90207481

版权

前端之路专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了axios，一个类似于jQuery的Ajax库，用于实现Ajax功能。通过BootCDN可以方便引入。axios提供了丰富的HTTP请求方法如post、get、put等，并且专注于Ajax操作，更加专业。文中还展示了如何使用axios获取书名和更新书籍数量的示例。

摘要由CSDN通过智能技术生成

概念：axios是一个ajax库，和 jquery 用法很像，用来实现 ajax 功能

用法：在 BootCDN 上搜 axios，然后直接引入就可以

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

特点：
1、axios的功能更多：
axios.post()、axios.get()、axios.put()、axios.patch()、axios.delete()
2、除 ajax 功能外无其他功能，也就是更专一

用例：获取不同的书名，使用按钮修改书的数量

html部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <title> axios test</title>
</head>
<body>

  <div id="app">
    <div>
      书名：---name---
      数量：<span id="num">---number---</span>
    </div>
    <div>
      <button id="add1">+ 1</button>
      <button id="remove1">- 1</button>
      <button id="reset">归 0</button>
    </div>
  </div>

  <script src="./main.js"></script>

</body>
</html>

JS部分：

//1.先用ajax获取一个数据
let book = { //变量，作为缓存，这里原始值，不能每次都去声明这个变量，所以放在最外面
  'name': 'JavaScript高级程序设计',
  'number': 2,
  'id':1
}
//这个api是指在真正返回 response 之前先执行后面的东西，这里就是先执行这个函数
axios.interceptors.response.use(function (response) {

    // let config = response.config; //获取url里面的书名
    // let { url, method, data } = config; //这里的data是请求时候的data，response的data是响应时候的data
    let {config:{url,method,data}} = response.config;  //上面两行等于这行

    if (url === '/books/1' && method === 'get') {   //与node那里很像
        response.data = book
    }else if(url === "/books/1" && method === "put"){
      Object.assign(book,data);   //这个api可以实现部分赋值，也可以理解为部分更新，把data的数据传到book里
      response.data = book
      //这里面的number是动态的，是请求中的data里面的number，但下次得到的又是新的，所以需要一个变量来缓存一下
          
    return response
})



//2.使用这个数据更新html里的内容
axios.get('/books/1')
    .then((data) => {   //直接拿到这个目录下的 data ，data里面包括 name,number,id
        let oldHtml = $('#app').html()
        let newHtml = oldHtml.replace('---name---',data.name)   //修改数据
                        .replace('---number---',data.number)
        $('#app').html(newHtml)
    })



//3.通过事件委托，监听按钮，实现按钮的功能
// 加 1 本
$('#app').on('click', '#add1',function () { //时间委托，如果app里面的点击事件符合add1，就直接执行下面的代码
    var oldNum = $('#num').text();  //String类型
    var newNum = oldNum - 0 + 1;   // -0 是让它变为number类型
    axios.put('books/1',{   //发送put请求，成功后再去修改数据
      'number':'newNum'
    }).then(()=>{
      $('#num').text(newNum)
    })
})

//减 1 本
$('#app').on('click', 'remove1',function () {
    var oldNum = $('#num').text();
    var newNum = oldNum - 0 - 1;
    if (newNum < 0) {
        newNum = 0;
    }
    axios.put('books/1',{
      'number':'newNum'
    }).then(()=>{
      $('#num').text(newNum);
    })
})

//归 0
$('#app').on('click','#reset',function () {
    var newNum = 0;
    axios.put('books/1',{
      'number':'newNum'
    }).then(()=>{
      $('#num').text(newNum)
    })
})

70kggg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识 axios

概念：axios是一个ajax库，和 jquery 用法很像，用来实现 ajax 功能用法：在 BootCDN 上搜 axios，然后直接引入就可以<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>特点：1、axios的功能更多：axios.post()...
复制链接

扫一扫

专栏目录