43promise和ajax封装

43promise和ajax封装

一、回调函数的嵌套

回调函数是一个作为变量传递给另一个函数的函数，它在主体函数执行完之后执行

正常的代码都是链式的，某一步执行出问题，则向下停止，而回调函数则不然

在回调函数中嵌套，就是上一个函数执行完成，在执行下一个

二、promise的使用

在JavaScript的世界中，所有的代码都是单线程执行的。由于这个"缺陷"，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现

promise使ES6中引入的一个异步编程解决方案，与传统的ES5方法相比它的结构更合理，功能更强大

特点

promise对象代表一个异步操作，有三种状态: pending (进行中)、fulfilled (已成功)和rejected (已失败)。只有异步操作的结果，可以决定当前是哪一种状态，热河其他操作都无法改变这个状态

let p = new Promise(function(resolve, reject){})
resolve	成功
reject	失败

基本使用

let p = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("成功")
        reject("失败")
    }， 2000)
})

.then (callback)的使用 (成功时调用)

.catch (callback)的使用 (失败时调用)

p.then(function(data){
    console,log("成功")
    console.log(data)
}).catch(function(data){
    console.log("失败")
    console.log(data)
})

resolve和reject的两种状态

resolve	将promise对象的状态从"未完成"变成"成功" (即从pending变为resolved)，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
reject	将promise对象的状态从"未完成"变为"失败"(即从pending变为rejected)，在异步擦欧洲哦失败时调用，并将异步操作报错作为参数传递出去

三、使用promise改造ajax

class Axios {
	static ajax(item = {}) {
		let {
			url,
			data,
			method
		} = item
		if (!url) {
			throw new Error('输入地址')
		}
		let arr = []
		for (let i in data) {
			arr.push(`${i}=${data[i]}`)
		}
		data = arr.join("&")
		return new Promise((resolve, reject) => {
			let http = new XMLHttpRequest()
			if (method == "get") {
				url = url + "?" + data
				data = ""
			}
			http.open(method, url, true)
			http.setRequestHeader("content-type", "application/x-www-form-urlencoded")
			http.send(data)
			http.onreadystatechange = function () {
				if (http.readyState == 4) {
					if (http.status == 200) {
						resolve(http.response)
					} else {
						reject(http.status)
                    }
                }
            }
        }).then(data => {
            console.log(data)
        }).catch(data => {
            console.log(data);
        })
    }
}

四、ajax的同源策略

- 协议相同
- 域名相同
- 端口相同

目的

保证用户信息安全，防止恶意的网站窃取数据

限制范围

- cookie、localStrong和indexDB无法读取
- DOM无法获得
- ajax请求在浏览器端有跨域限制