目录
promise
promise的基本语法
async await
try catch
promise 静态方法
跨域
跨域的解决方案
1-cors
编辑
2-jsonp方案
3-代理服务器
promise
promise 是一个es6新增的语法
承诺的意思 作用:是专门用来解决回调地狱!!!!
promise的基本语法
// 基本语法:// Promise中 写异步代码// let p1 = new Promise(function(resolve,reject){//resolve("成功")reject("失败")})// 一旦调用了.then 就会触发resolve 方法// 一旦调用了 .catch 就会触发 reject 方法p1.then(res=>{console.log(res);})p1.catch(err=>{console.log(err);})//promise 有三种状态// pending -- 创建成功 等待中// fulfilled -- 调用了resolve 成功时执行// rejected -- 调用了 reject 失败时执行 new Promise(function(resolve,reject){resolve("成功")// reject("失败")}).then(res=>{console.log(res);}).catch(err=>{console.log(err);}).finally(()=>{console.log("成功失败都执行");})async await
async await 是promise的语法糖
是一个es7的写法
一定要配对使用，，
await 后 是一个promise对象
async 加在await所在的函数！！！
语法
async function fn(){await promise对象1await promise对象2。。。。
}
等着promise对象1执行完 走promise对象2 // function fn() {// new Promise((resolve, reject) => {// setTimeout(() => {// resolve();// console.log("2秒后执行1111");// }, 2000)// }).then(res => {// new Promise((resolve, reject) => {// setTimeout(() => {// resolve();// console.log("2秒后执行222");// }, 2000)// })// })// }async function fn(){await new Promise((resolve, reject)=>{setTimeout(() => {resolve();console.log("2秒后执行1111");}, 2000)})await new Promise((resolve, reject)=>{setTimeout(() => {resolve();console.log("2秒后执行222");}, 2000)})}fn()try catch
async await 不能捕获失败， 一旦失败 await后面的代码就不会执行,
可以借助try catch 捕获到错误的状态
try {// 尝试走这里的代码let obj = null;obj.name = "哈哈";console.log(obj);} catch (error) {// error 就是一个形参 代表是你报错的信息// 如果有错 catch 捕获到错误console.log("写法有误");} async function fn() {try {let res = await new Promise((resolve, reject) => {setTimeout(() => {// resolve("成功")reject("失败123")}, 2000)console.log(9999);})// XXXconsole.log(res);} catch (error) {console.log("网络不好，请检查",error);// XXXX}}fn();
promise 静态方法
promise.all()
方法用于将多个promise实例，包装成一个新的promise实例
let p1 = new Promise((r, j) => {setTimeout(() => {r();console.log("p1成功");}, 2000)
})
let p2 = new Promise((r, j) => {setTimeout(() => {r();console.log("p2成功");}, 4000)
})// 等到 p1 和 p2 都执行成功时，就在干什么事儿？
// Promise.all 方法 返回值也是一个promise对象
let p = Promise.all([p1,p2]);
p.then(res=>{console.log("都成功了");
})promise.race()
只要有一个promise对象 有状态了（不管成功 失败） 就会执行触发race
let p = Promise.race([p1,p2]);p.then(res=>{console.log(res,"有状态了");})p.catch(err=>{console.log(err,"有错误状态了");})#axios库ajax封装 后面学框架用的
<!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>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script>
</head><body><script>// get强求//get无参数axios.get("http://localhost:8888/test/second").then(res => {console.log(res);})// get有参数axios.get("http://localhost:8888/test/third", {params: {name: "jack",age: 18}}).then(res => {console.log(res);})// post 三阶段 axios里 请求拦截器 也可以通过请求拦截器设置请求头axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";axios.post("http://localhost:8888/test/fourth", { name: "jack", age: 18 }).then(res=>{console.log(res);})</script>
</body></html>跨域
什么是跨域？浏览器发起网络请求的时候会报一个跨域的错。
正常请求
从我的页面去请求weibo显示跨域错误
因为浏览器有同源策略的限制
同源策略：协议，域名，端口号有一个不一样时 浏览器认为是不同的域，请求不到返回的数据(就是不让访问"认为不是一家人")
浏览器的域：http://127.0.0.1:5500/(当前前端页面)
服务器的域：Sina Visitor System
http 默认端口号 80
https默认端口号是 443
-
注意：同源策略是浏览器的，服务器没有这个东西
-
当我们想向别人的服务器发起请求时，会被阻止，因为有同源策略的限制
-
别人的服务器：
-
当你请求的地址 的 协议、域名、端口号 有一个不同的时候 就算是别人的服务器
-
这个时候就会触发同源策略的限制
-
触发了同源策略的限制 就算跨域
-
默认情况下 如果不处理 都是会跨域的
<body><button>发起请求</button><script>var btn = document.querySelector("button");btn.onclick=async function(){// Access-Control-Allow-Origin: *// http://localhost:5500 浏览器let res = await axios.get("http://localhost:8888/test/second")console.log(res);}// btn.onclick=async function(){// // access-control-allow-origin: https://s.weibo.com// let res = await axios.get("https://weibo.com/ajax/side/hotSearch")// console.log(res);// }</script>
</body>响应头:access-control-allow-origin:http://s.weibo.com//表示你想访问微博热搜接口，只有这一个域能访问。//weibo.com域肯定是人家内部的服务器，只有weibo内部人员可以调用人家接口。你可以看人家接口的数据但是人家不让你访问。你调人家接口又不给人家钱 人家服务器有压力
这个错误表示自己的域127.0.0.1去访问weibo.com的域被阻止了
人家的这套接口只允许weibo.com的域访问。
那域名能模拟吗？
跨域的解决方案
默认情况下都是跨域的，就算是本地。
1-cors
后端使用的解决方案
cors (Cross - origin resourse sharing) 跨域资源共享 不管你浏览器什么端口允许浏览器跨服务器发起请求 #后端解决跨域#修改后端代码
做法 就是在请求头中 添加
Access-Control-Allow-Origin: * //表示所有域名都可以访问打开后端代码：找到app.js
前提是先下载好 cors
const cors = require('cors')
app.use(cors())
2-jsonp方案
不是特别常用了，，面试时候会问
为什么jsonp可以借助script 标签 实现跨域？ 因为script标签的src属性比较nb的天生是 不受浏览器同源策略的限制
<script src="XXXXXXXXXX"> </script>
<!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>Document</title>
</head>
<body><!-- wd 输入的关键词cb 是callback 回调函数--><script>function fn(res){console.log(res);}</script><!-- https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=1&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=jQuery110202603723661767965_1681222830429&_=1681222830432 --><script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=1&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=fn&_=1681222830432"></script>
</body>
</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>Document</title>
</head><body><input type="text"><ul></ul><script>var ipt = document.querySelector("input");ipt.oninput = function () {// console.log(this.value);// 通过script标签引入 接口地址 并且把value值给他传过去let url = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36557,38470,38368,38468,38289,38485,37924,26350,22158&wd=${this.value}&req=2&bs=%E5%BE%AE%E5%8D%9A&csor=1&cb=fn&_=1681222830432`let script = document.createElement("script");script.src = url;document.body.appendChild(script)}let ul = document.querySelector("ul");function fn(res){let str = "";if(ipt.value===''){str="";ul.innerHTML = str;return}res.g.forEach(item => {str+=`<li>${item.q}</li>`});ul.innerHTML = str;}</script><!-- <script src="XXXXXXXX"></script> -->
</body></html>
