day27promise和jsonp

Ajax回顾:

核心对象:xmlhttprequset

步骤

1.创建对象

2.打开请求地址(设置请求方式GET和POST)

3.发送监听请求

5.在请求监听中获取数据

回调地狱

回调函数的无线嵌套 导致代码可读性和维护性差(代码失去了价值0

//需求 从a接口里面查询 用户名是李四的id
//从b接口查询对应的id的商品
//从c接口查询对应的商品的ip的商品类型
// 伪代码
AjaxUtil.get('a',{username:'李四'},(res)=>{ //a接口通过传姓名 获取返回的id
AjaxUtil.get('b',{id:res.data.id},(res)=>{ //通过a接口返回的id 来获取对应的商品
AjaxUtil.get('c',{id:res.data.id},(res)=>{ //通过b接口返回的商品id 来获取对应
的商品类型
console.log(res.data);
....
})
})
})

解决回调地狱

使用es6新增的promise对象

Promise对象

概述:

promise是es6新增的一个对象,他翻译为状态.promise设计为异步的

 

 

 等待状态(不能做其他事的事情)

成功状态(有成功调用的方法)

失败的状态(有失败的方法)

示例

// 使用new关键词 里面传递的参数是一个方法 这个方法里面通常存储一些异步的操作
// resolve表示成功执行的方法 reject失败执行的方法
var promise = new Promise((resolve,reject)=>{
let timer = setTimeout(()=>{
console.log('hello');
//调用成功的方法 里面可以传参数
// resolve('成功')
reject('失败')
},2000)
})

then (resolve进入的方法)

//对应的promise对象有俩个方法 then 成功调用的方法 catch 失败调用的方法
//.then 在对应的resolve方法调用以后 .catch reject调用才能进入
promise.then((res)=>{
//在then里面的方法 里面的参数为resolve的传递的参数
console.log(res);
console.log('我执行完了');
})

catch(reject进入的方法)

promise.catch((err)=>{
//在catch里面的方法 里面的参数为reject的传递的参数
console.log(err);
})

finally(只要达到成功或者是失败调用的方法)

//不管成功还是失败都会调用的方法(没有值传递)
promise.finally(()=>{
console.log();
})

then catch finally 都是原型方法 Promise.prototype上面的方法

对象方法

Promise.reject() //返回的是一个promise对象(then获取的参数)

Promise.resolve()//返回的是一个promise对象(cacth获取的参数)

Promise.all(promise数组)//返回的一个promise数组(并行 包含执行完成的)

Promise.race(promise数组)//返回的一个promise对象(返回的是最先执的promise)

//对象方法
Promise.reject('失败').catch((res)=>{
console.log(res);
}) //失败
Promise.resolve('成功').then((res)=>{
console.log(res);
}) //成功
var arr = Promise.all([promise1,promise2,promise3]) //当所有的执行完才返回结果(数组)
var promise4 = Promise.race([promise1,promise2,promise3]) //race竞速 谁先执行完就是
谁

利用promise来解决回调地狱

 

 

 1.通过在对应的.then方法返回一个新的promise对象的形式

//解决回调地狱的方案
promise1.then((res)=>{
console.log(res);
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('jack');
resolve('jack的promise')
},1000)
})
}).then((res)=>{
console.log(res);
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('吃饭了吗');
resolve('吃饭了的promise')
},1000)
})
}).then((res)=>{
console.log(res);
setTimeout(()=>{
console.log('你好');
},1000)
})

ES7新增async(异步)await(等待)

1.async修饰方法 await修饰对应的promise对象

2.await只能在async里面使用(他是来修饰promise对象的)

3.await会让当前主线程等待(上锁)当你执行完成(成功了或者失败了)才放行(解锁)

//使用es7的 async以及await来简化代码
window.onload = async ()=>{
await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('hello');
resolve()
},1100)
})
await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('您好');
resolve()
})
})
console.log('执行完了');
}

 

 

 

 

同源策略

概述:同源策略是netspac提出的一种安全策略,他是为了防止对应的后台被无限的访问(导致对应的安全问题).他是域名相同(IP地址)端口号相同 协议相同.

同源导致的问题(跨域CORS)

1.协议不同

2.端口号不同

3.ip地址不同

4.在ftp请求 资源也不同也会跨域

 

 

 解决跨域问题

1.后台解决(通过设置相应头)

Access-Control-All-Origin:*//所有都可以访问

Access-Control-All-Origin-Method:*//所有请求请求都可以访问

2.前台解决(通过对应的请求来设置对应的后台的响应)

3.前台解决(通过jsonp来解决跨域后台的配合)

4.代理(我将对应你的访问作为我对应的服务器的代理)

跨域的根本问题是因为http协议(不走http协议websocket(tcp协议))

JSONP

jsonp是一种解决跨域的方式,他需要后台的配合,对应的jsonp的核心是利用了对应html中带链接的标签特性(link script iframs,不受跨域影响的特性来解决问题)这个里面的js代码不是浏览器本身在操作的而是后台通过服务器来操作渲染的

 

 原理:利用script标签 链接这个地址 再将我们回调函数作为参数传入

缺点:只支持get请求(根本上就是get请求)

json入门案例(百度搜索)

今日问题

安装node.js node安装成功 在cmd中node -v成功显示版本号,但是npm -v报错

 

 解决办法:

在系统环境变量的用户变量的path 设置node.js中的node_global的路径