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

axios优势

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

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

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

**axios主要特点

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

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

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

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

1. post：一般用于新建
2. put：一般用于更新（适合数据量比较少的更新）
3. 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);
            })
        })

这篇好文章是转载于：学新通技术网