axios-笔记1 它是专注于网络数据请求的库

axios优势

比原生的XMLHttpRequest 简单易用比Jquery 轻量

现在主流是用axios 来请求数据吗？

axios本质上算是对原生XHR的封装，基于promise 的 HTTP 库，可以 在浏览器和 node.js中使用专注于网络数据请求的库

**axios主要特点

从浏览器创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防御XSRF [2]

Axios常用的几种请求方法有哪些：

get：（一般用于）获取数据post：提交数据（表单提交+文件上传）put：更新（或编辑）数据（所有数据推送到后端（或服务端））patch：更新数据（只将修改的数据推送到后端）delete：删除数据

一般公司在实际开发项目过程中：

post：一般用于新建put：一般用于更新（适合数据量比较少的更新）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端

// axios 如何 发起GET请求

document.querySelector('#btn1').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/get';
            var ops = {
                name: '85s',
                age: 20
            }
            axios.get(url, {
                params: ops
            }).then(function(res) {
                console.log(res);
            })
        })

// axios 如何 发起post请求

document.querySelector('#post').addEventListener('click', function() {
            var url = 'http://www.liulongbin.top:3006/api/post';
            var dataops = {
                bookname: '明天准备上班',
                author: '小明'
            }
            axios.post(url, dataops).then(function(res) {

                console.log(res);
            })
        })

// axios 直接 发起get请求

document.querySelector('#aG').addEventListener('click', function() {

            var url = 'http://www.liulongbin.top:3006/api/get';
            var ops = {
                name: '我的工作',
                age: '在哪里'
            }
            axios({
                method: 'GET',
                url: url,
                params: ops
            }).then(function(res) {
                console.log(res.data);
            })
        })

// axios 直接 发起POST请求

document.querySelector('#aP').addEventListener('click', function() {
            axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/post',
                data: {
                    bookname: '我错了',
                    author: '每个人'
                }
            }).then(function(res) {

                console.log(res.data);
            })
        })