手搓ajax的封装

ajax的封装

前言

每一次发送请求我们都需要重复创建实例,配置请求 发送请求 获取数据,为了能够使用更加方便,我们对于ajax请求的步骤进行封装

同步的ajax请求

  • 同步封装ajax请求可以通过返回值的方式返回后端的数据
  • 请求参数
    • type 请求方式
    • url 请求路径
    • data 发送的数据
  • 返回值
    • 需要将后端的数据返回
js 复制代码
    function ajax(type, url, data){
        const xhr = new XMLHttpRequest
        if(type === 'get'){
            // get请求参数拼接在地址栏后面
            xhr.open(type, url+data, false)
            xhr.send()
        }else{
            // post请求参数放在send函数里面
            xhr.open(type, url, false)
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 去除前面的?
            xhr.send(data.slice(1))
        }
        return xhr.responseText
    }
    // 调用
    let res = ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18')
    console.log(res)
    let res2 = ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18')
    console.log(res2)

异步的ajax请求

  • 异步封装ajax请求无法通过返回值的方式返回后端的数据,需要借助回调函数的方式返回后端的数据
  • 请求参数
    • type 请求方式
    • url 请求路径
    • data 发送的数据
    • success 请求成功之后执行的回调函数
  • 返回值
    • 无返回值
js 复制代码
    function ajax(type, url, data, success){
        const xhr = new XMLHttpRequest
        if(type === 'get'){
            // get请求参数拼接在地址栏后面
            xhr.open(type, url+data, true)
            xhr.send()
        }else{
            // post请求参数放在send函数里面
            xhr.open(type, url, true)
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 去除前面的?
            xhr.send(data.slice(1))
        }
        xhr.onload = function(){
            // 调用回调函数返回后端的数据
            success(xhr.responseText)
        }
    }
    // 调用
    ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18', function(res){
        console.log(res)
    })
        
    ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18', function(res){
        console.log(res)
    })

请求的参数支持对象

  • 参数为字符串会容易导致出错,传一个对象不会容易出错
js 复制代码
    function ajax(type, url, data, success){
        const xhr = new XMLHttpRequest
        if(Object.prototype.toString.call(data) === '[object Object]'){
            let str = '?'
            for(let key in data){
                str += `${key}=${data[key]}&`
            }
            data = str.slice(0,-1)
        }
        if(type === 'get'){
            // get请求参数拼接在地址栏后面
            xhr.open(type, url+data, true)
            xhr.send()
        }else{
            // post请求参数放在send函数里面
            xhr.open(type, url, true)
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 去除前面的?
            xhr.send(data.slice(1))
        }
        xhr.onload = function(){
            // 调用回调函数返回后端的数据
            success(xhr.responseText)
        }
    }
    // 调用
    ajax('get', 'http://localhost:8888/test/third', '?name=jack&age=18', function(res){
        console.log(res)
    })
    
    ajax('post', 'http://localhost:8888/test/fourth', '?name=jack&age=18', function(res){
        console.log(res)
    })
    // 调用
    ajax('get', 'http://localhost:8888/test/third', {
        name: 'jack',
        age: 18
    }, function(res){
        console.log(res)
    })
    
    ajax('post', 'http://localhost:8888/test/fourth', {
        name: 'jack',
        age: 18
    }, function(res){
        console.log(res)
    })
        

可省略参数

  • 参数由4个变成一个对象
js 复制代码
    function ajax(params){
        const defaultParams = {
            type: 'get',
            url: '',
            data: {},
            success: function(){

            }
        }
        // 合并默认配置
        const options = {...defaultParams,...params}
        const xhr = new XMLHttpRequest
        if(Object.prototype.toString.call(options.data) === '[object Object]'){
            let str = '?'
            for(let key in options.data){
                str += `${key}=${options.data[key]}&`
            }
            options.data = str.slice(0,-1)
        }
        if(options.type === 'get'){
            // get请求参数拼接在地址栏后面
            xhr.open(options.type, options.url+options.data, true)
            xhr.send()
        }else{
            // post请求参数放在send函数里面
            xhr.open(options.type, options.url, true)
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 去除前面的?
            xhr.send(options.data.slice(1))
        }
        xhr.onload = function(){
            // 调用回调函数返回后端的数据
            options.success(xhr.responseText)
        }
    }
    // 调用
    ajax({
        type: 'get',
        url: 'http://localhost:8888/test/third',
        data: {
            name: 'jack',
            age: 18
        },
        success: function(res){
            console.log(res)
        }
    })
    ajax({
        url: 'http://localhost:8888/test/third',
        data: {
            name: 'jack',
            age: 18
        },
        success: function(res){
            console.log(res)
        }
    })
    ajax({
        url: 'http://localhost:8888/test/second',
        success: function(res){
            console.log(res)
        }
    })
相关推荐
速易达网络4 分钟前
Vue3 原生移动应用开发来了
前端·javascript·css
渣哥7 分钟前
别再乱用了!Spring AOP 与 AspectJ 的区别比你想的复杂
javascript·后端·面试
GISer_Jing7 分钟前
LLM对话框项目技术栈&重难点总结
前端·ai·node.js
患得患失94914 分钟前
【Turborepo】【Next】 Turborepo + Next.js 前后端精简搭建笔记(带官网)
开发语言·javascript·笔记
我爱学习_zwj29 分钟前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
小谭鸡米花29 分钟前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
摆烂工程师33 分钟前
什么是 ChatGPT Business 会员?与 ChatGPT Plus 有什么不同?
前端·后端·程序员
闲不住的李先森43 分钟前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝1 小时前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript
刺客_Andy1 小时前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js