Axios 和 Ajax 的區(qū)別

1、Axios是一個基于Promise的HTTP庫，而Ajax是對原生XHR的封裝；
2、Ajax技術實現(xiàn)了局部數(shù)據(jù)的刷新，而Axios實現(xiàn)了對ajax的封裝。

優(yōu)缺點：

ajax：
本身是針對MVC的編程,不符合現(xiàn)在前端MVVM的浪潮
基于原生的XHR開發(fā)，XHR本身的架構(gòu)不清晰，已經(jīng)有了fetch的替代方案
JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務
axios：
從 node.js 創(chuàng)建 http 請求
支持 Promise API
客戶端支持防止CSRF
提供了一些并發(fā)請求的接口（重要，方便了很多的操作）

GET 請求

        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 請求
            axios.get('/axios-server', {
                //url 參數(shù)
                params: {
                    id: 100,
                    vip: 7
                },
                //請求頭信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

POST請求

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //請求頭參數(shù)
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }

函數(shù)通用方法

btns[2].onclick = function(){
            axios({
                //請求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url參數(shù)
                params: {
                    vip:10,
                    level:30
                },
                //頭信息
                headers: {
                    a:100,
                    b:200
                },
                //請求體參數(shù)
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //響應狀態(tài)碼
                console.log(response.status);
                //響應狀態(tài)字符串
                console.log(response.statusText);
                //響應頭信息
                console.log(response.headers);
                //響應體
                console.log(response.data);
            })
        }

文章來源地址http://www.zghlxwxcb.cn/news/detail-604750.html

到了這里，關于【Ajax】筆記-Axios與函數(shù)發(fā)送AJAX請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！