ajax，fetch，axios的区别及运用

浅浅的花香味﹌ 2022-10-01 07:56 174阅读 0赞

## AJAX ##

*  是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
 *  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 *  传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

##### 1. ajax的封装(创建myajax.js 文件夹) #####

/** * { * method:get, * url: '/login.do', * content: 'username=admin&password=123' * success: functon(e){ * * } * } * * * * @param {*} json */
    function myajax(json) { 
        // 1. 获取 XmlHttpRequest
        var xhr = getXHR();
    
        // 2. 打开连接发送请求
        xhr.open(json.method, json.url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 请求头部
        xhr.send(json.content);
    
        // 3. 处理响应
        xhr.onreadystatechange = function (e) { 
            // 根据就绪码判断响应是否完成
            if (e.target.readyState === 4) { 
                // 根据状态码判断成功失败
                if (e.target.status === 200) { 
                    /* console.log(e.target.responseText); alert('响应内容是 :' + e.target.responseText); */
                    json.success(e.target.responseText);
                }
            }
        }
    }
    
    
    function getXHR() { 
        if (window.XMLHttpRequest) { 
            return new window.XMLHttpRequest;
        } else { 
            // 兼容IE浏览器低版本
            new window.AtiveXObject("Microsoft.XMLHTTP");
        }
    }
    
    export default myajax;  //暴露出去

##### 2.调用myajax #####

myajax({ 
            method: "post",   //请求方式post get
            url: "http://127.0.0.1:8089/api/login",  //请求地址
            content: `username=${ username}&password=${ password}`,  //请求正文
            success: function(e) {   //成功的函数回调 
              const data = JSON.parse(e);
              if (data.resultcode === -1) {   //接口文档中给的参数，判断是否等于-1
                //登录失败
                that.message = data.resultinfo;
              } else { 
                //登录成功
                that.$router.replace({  path: "/main" });
              }
            }
          });

## Fetch ##

*  fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
 *  \-优势

1.  语法简洁，更加语义化
2.  基于标准 Promise 实现，支持 async/await
3.  同构方便，使用 isomorphic-fetch
4.  更加底层，提供的API丰富（request, response）
5.  脱离了XHR

##### fetch使用代码 #####

---get请求---
    
    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', { 
        method: 'GET'
      })
      .then((res)=>{ 
        return res.text()  // res.json();
      })
      .then((res)=>{ 
        console.log(res)
      })
    
    ---post请求---
    // 通过fetch获取百度的错误提示页面
    fetch('https://www.baidu.com/search/error.html', { 
        method: 'POST',
        body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
      })
      .then((res)=>{ 
        return res.text()
      })
      .then((res)=>{ 
        console.log(res)
      })

## Axios ##

\-axios主要是jQuery的ajax与fetch的融合，十分强大

*  特点

1.  支持浏览器和node.js
2.  支持promise(重点)
3.  能拦截请求和响应
4.  能转换请求和响应数据
5.  能取消请求
6.  自动转换JSON数据
7.  浏览器端支持防止CSRF(跨站请求伪造)

##### 1. 安装 #####

npm install axios   //然后在需要的地方调用

##### 2. 安装 #####

axios({ 
      method: 'post',  //请求方式
      url: '/user/12345',   //请求地址
      data: {    //请求数据
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    }).then(res=>{ 
    	console.log(`成功的回调${ res}`)
    }).catch(err=>{ 
    	console.log(`错误的回调${ err}`)
    });