javascript回调函数

最新推荐文章于 2023-08-27 18:04:54 发布

胡小葵

最新推荐文章于 2023-08-27 18:04:54 发布

阅读量236

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/m0_48860371/article/details/126972420

版权

回调函数

A函数作为B函数参数，在B函数中调用执行，这个函数称为回调函数.

在这里插入图片描述

回调函数作用

将函数中的数据作为参数传给回调函数处理
解决异步编程问题，处理异步操作完成后结果

同步任务：一个任务完成后再处理下一个任务
异步任务：一个任务开始后，不等主程序执行完继续执行下一个任务
如：定时器；ajax网络任务

	function test1() {
				console.log('烧开水')
				// console.log('买茶叶')
				setTimeout(function () {
					console.log('买茶叶')
				}, 1000)

				console.log('主程序继续执行')
			}
//console.log('烧开水') console.log('主程序继续执行')   console.log('买茶叶')

封装jsonp

<script>
			class MyJsonp {
				constructor(url) {
					this.scriptEle = document.createElement('script') // <script>
					this.scriptEle.setAttribute('src', url)
					document.body.appendChild(this.scriptEle)
				}
                getResult(cb){
                    // callback函数名与后端约定
                    window.callback = function(result){
                        // console.log('data >> ',data)
                        cb(result)
                    }
                }
			}
			const myJsonp = new MyJsonp('http://10.7.162.150:8089/api/jsonp/list')
            myJsonp.getResult(function(data){
                console.log('data>>11',data)
            })
            
		</script>

ajax封装

前端的 js 文件

/**
 * 以下是改变的东西，单独传入，写在html里
 let options = {
            method:  'get',
            url: '',
            data:{
                name:'jack'
                age:18
            },
            success:function(data){
                    
            }
        }
 */
        function ajax(options) {
            // 1. 创建XMLHttpRequest
            let xhr = new XMLHttpRequest()
            let param = formateParam(options.data) // name=jack&age=18
            let method = options.method.toUpperCase()//将method里数据全转为大写
            // 2. 建立连接 get post 传参方式不同
            if (method == 'GET') {
                xhr.open(options.method, options.url + '?' + param)
                // 3. 发送请求
                xhr.send()
            }else if(method == 'POST'){
                xhr.open(options.method,options.url)
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                xhr.send(param)
            }
        
            // 4. 接收响应数据
            xhr.onreadystatechange = function () {
                // 4.1 是否响应完成
                if (xhr.readyState === 4) {
                    // 4.2 是否成功响应
                    if (xhr.status === 200) {
                        let data = xhr.responseText // 响应内容
                        data = JSON.parse(data)
                        //通过回调函数将响应的数据传出去，传给options函数里的success方法
                        options.success(data)
                    } else {
                        alert('网络出错 ' + xhr.status)
                    }
                }
            }
        }
        
        /**
         * 格式化参数
         *  {name:'jack',age:18}  =>  name=jack&age=18
         *   遍历对象，属性转换成名称=值形式，存储到数组, 再将数组元素用&符号拼接join('&)
         *    ['name=jack','age=18']  ->
         */
        //obj是任意传入的参数
        function formateParam(obj) {
            let arr = []
            for (const key in obj) {
                let item = `${key}=${obj[key]}` // name=jack   age=18
                arr.push(item) // ['name=jack','age=18;]
            }
            return arr.join('&') // name=jack&age=18
        }
        
        // let str = formateParam({name:'jack',age:18})
        // console.log(str)

前端html文件

<!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>ajax封装</title>
	</head>
	<body>
		<script src="./ajax封装.js"></script>
		<script>
            //执行ajax函数，传入参数进去，执行ajax封装.js里的函数
            let options = {
                method: 'posT',
				url: 'http://localhost:8888/test/fourth',
				data: {
					name: 'rose',
					age: 108,
				},
				success: function (data) {
                    //拿到回调函数从后端获取的数据
					console.log('data >> ', data)
				},
        }
            ajax(options)

		</script>
	</body>
</html>