关于Ajax的封装详解

更新时间：2023年05月17日 10:31:49 作者：独立寒秋-

这篇文章主要介绍了关于Ajax的封装详解,ajax用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新,本篇讲解ajax的封装,需要的朋友可以参考下

Ajax的封装

一个免费的测试接口

https://api.apiopen.top/getJoke

一、最简单的原生Ajax封装

先看下效果

在这里插入图片描述

具体代码

<body>
    <div class="box">
        <button id="btn">来段数据</button><br>
    <textarea  id="text" ></textarea>
    </div>
    <script>
        const btn = document.getElementById("btn");
        const txt = document.getElementById("text");
        btn.onclick = function(){
             getAjax('get','https://api.apiopen.top/getJoke',function(res){
                let narr=[];
                for(let i=0;i<res.length;i++){
                    narr.push('\n'+(i+1)+'.'+res[i].text)
                    console.log(res[i].text);
                    text.innerHTML=narr;
                }
             });
        }
        function getAjax(method,url,callback){
            const xhr =  new XMLHttpRequest();
            xhr.open(method,url);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        const res = JSON.parse(xhr.response);
                        callback(res.result);
                    }
                }
            }
        }
    </script>

二、使用promise函数封装

Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的回调结果。

通过promise实例化的对象可以接受一个参数，参数类型为函数，该函数的两个参数是resolve和reject，
在请求到数据后可以通过resolve、resolve函数来改变Promise对象的状态
resolve表示成功，resolve表示失败
成功或者失败都可以调用Promise对象的then方法
then接收两个参数，两个参数都是函数类型
成功的形参为value，失败的形参为reason
value就是resolve方法里的返回结果

<script>
    const btn = document.getElementById("btn");
    btn.onclick = function(){
        grtAjax('get','https://api.apiopen.top/getJoke',function(res){
            console.log(res);
        });
    }
    function grtAjax(method,url,callback){
        const p = new Promise((resolve,reject)=>{
            const xhr = new XMLHttpRequest();
            xhr.open(method,url);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        resolve(xhr.response);
                    }else{
                        reject(xhr.status);
                    }
                }
            }
        });
        p.then(function(value){
            const res = JSON.parse(value);
            callback(res.result)
        },function(reason){
        console.error(reason);
        })
    }
</script>

在这里插入图片描述

三、promise配合async和await使用

async

async和await两种语法结合可以让异步代码像同步代码一样
async函数的返回值为promise对象
该promise对象的结果是由async函数执行的返回值决定的
只要返回值的类型不是一个promise类型的对象则async函数的返回结果就是一个成功的promise对象
返回值的类型不是一个promise类型的对象则跟promise对象的状态有关revolve或者reject或者抛出异常

await

await右侧的表达式一般为promise对象，但也可以是其他的值
如果是promise对象，await返回的是promise成功的值
如果是其他的值，直接将此值作为await的返回值
await必须写在async函数中，但是async函数中可以没有await
如果await的promise状态是失败的，就会抛出异常，需要通过try…catch捕获处理

在这里插入图片描述

<body>
    <button>请求数据</button>
    <script>
        const btn = document.querySelector('button');
        function sendAjax(method,url){
            return new Promise((resolve,reject)=>{  
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open(method,url);
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >=200 && xhr.status<300){
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            })
        }
        btn.addEventListener('click',async function(){
            let result = await sendAjax('get','https://api.apiopen.top/getJoke');
            console.log(result);
        })
    </script>
</body>

四、使用axios工具库直接发送Ajax

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

这里使用了vue-cli搭建了一个vue项目并下载了 axios

post

在这里插入图片描述

get

在这里插入图片描述

<template>
<div>
        <button @click="post">直接发送POST</button>
        <button @click="get">直接发送GET</button>
  </div>
</template>
<script>
export default {
  data(){
    return{}
  },
  methods:{
    async get(){
      const {data:res} = await this.$axios.get('https://api.apiopen.top/getJoke',{
        params:{id:1}
      });
      console.log(res);
    },
     post(){
      this.$axios.post('https://api.apiopen.top/getJoke',{name:'yxj',gender:'男'})
      .then((res)=>{
        console.log(res.data.result);
      });
    }
  }
}
</script>

到此这篇关于关于Ajax的封装详解的文章就介绍到这了,更多相关Ajax的封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Ajax
封装

ajax跨域访问报错501的解决方法
这篇文章主要为大家详细介绍了ajax跨域访问报错501的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Jquery中$.ajax()方法参数详解
本文是小编日常整理些有关jquery ajax()参数详解，由于jquery ajax方法参数比较多，靠大脑记住有点犯难，下面小编把内容整理分享到脚本之家网站，供大家参考
2015-10-10
Ajax异步请求的五个步骤及实战案例
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,下面这篇文章主要给大家介绍了关于Ajax异步请求的五个步骤及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
AJAX和JSP实现的基于WEB的文件上传的进度控制代码
AJAX和JSP实现的基于WEB的文件上传的进度控制代码...
2007-05-05
AJAX和JSP混合使用方法实例
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。下面通过本文给大家介绍AJAX和JSP混合使用方法实例，感兴趣的朋友一起学习吧
2016-02-02
AJAX初体验之上手篇
AJAX初体验之上手篇...
2006-07-07
ajax实时任务提示功能的实现代码
本项目运用了 FLEAPHP,MYSQL,SMARTY,FCKEDItor,JSON,PROTOTYPE的技术,在这里首先要感谢这些开源项目的开发者给我们带来的好东西,其次要感谢[生气猪--让我帮她做一个这样的小东西来提醒她按时完成事情].花了一个3个小时完成.希望给大家起到抛砖引玉的作用啊....
2008-09-09
Ajax 请求队列解决方案并结合elementUi做全局加载状态
这篇文章主要介绍了Ajax 请求队列解决方案并结合elementUi做全局加载状态,使用消息队列制作请求防抖，防止重复请求印象服务器，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
AJAX乱码与异步同步以及封装jQuery库实现步骤详解
这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
利用AJAX实现无刷新数据分页
这篇文章主要介绍了利用AJAX实现数据分页的相关资料，如何利用AJAX无刷新直接从服务器获取数据分页，感兴趣的小伙伴们可以参考一下
2016-04-04