初识 axios

亦凉 2022-02-01 12:37 173阅读 0赞

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

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

**特点**：  
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)
        })
    })

[BootCDN]: https://www.bootcdn.cn