axios原理

最新推荐文章于 2024-07-16 20:32:10 发布

m0_65453610

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量187

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/m0_65453610/article/details/125461182

版权

一、什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios原理如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios原理</title>
</head>
<body>
    <script>

        // 原生ajax:  XmlHttpRequest对象   异步请求对象
        // 找对象   1:有目标对象    2：获取到联系方式   3：:发送请求   4： 等待回信-后端接口反馈

        // 原生ajax四步骤：
        // var  xhr = new  XMLHttpRequest();

        // xhr.open('get',"http://127.0.0.1:3000",true) ;
        
        // xhr.send(null);

        // xhr.onreadystatechange = function(){
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         xhr.responseText;
        //     }
        // }


        // 实现ajax的get请求：  Ajax.get()      axios.get()
        var Ajax = {
            get: function(url,fn){
                var  xhr = new  XMLHttpRequest();
                xhr.open('get',url,true) ;

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 从服务端获取数据
                        fn.call(this, xhr.responseText)
                    }
                };
                xhr.send();
            },
            post: function(url,fn){
                // 思路是一致的

            }

        }


        // 封装Ajax,实现axios进行回调   
        var axios = {
            get: function(url){
                return new Promise((resolve,reject) => {
                    var  xhr = new  XMLHttpRequest();
                    xhr.open('get',url,true) ;

                    xhr.onreadystatechange = function(){
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            // 从服务端获取数据
                            // fn.call(this, xhr.responseText)
                            resolve(xhr.responseText)
                        }
                    };
                    xhr.send();

                })