目录
[async await](#async await)
[try catch](#try catch)
[promise 静态方法](#promise 静态方法)
promise
promise 是一个es6新增的语法
承诺的意思 作用:是专门用来解决回调地狱!!!!
promise的基本语法
javascript
// 基本语法:
// 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 失败时执行
javascript
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所在的函数！！！
语法
javascript
async function fn(){
await promise对象1
await promise对象2
。。。。
}
等着promise对象1执行完 走promise对象2
javascript
// 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 捕获到错误的状态
javascript
try {
// 尝试走这里的代码
let obj = null;
obj.name = "哈哈";
console.log(obj);
} catch (error) {
// error 就是一个形参 代表是你报错的信息
// 如果有错 catch 捕获到错误
console.log("写法有误");
}
javascript
async function fn() {
try {
let res = await new Promise((resolve, reject) => {
setTimeout(() => {
// resolve("成功")
reject("失败123")
}, 2000)
console.log(9999);
})
// XXX
console.log(res);
} catch (error) {
console.log("网络不好，请检查",error);
// XXXX
}
}
fn();promise 静态方法
promise.all()
方法用于将多个promise实例，包装成一个新的promise实例
javascript
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
javascript
let p = Promise.race([p1,p2]);
p.then(res=>{
console.log(res,"有状态了");
})
p.catch(err=>{
console.log(err,"有错误状态了");
})#axios库ajax封装 后面学框架用的
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>
<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
-
注意：同源策略是浏览器的，服务器没有这个东西
-
当我们想向别人的服务器发起请求时，会被阻止，因为有同源策略的限制
-
别人的服务器：
-
当你请求的地址 的 协议、域名、端口号 有一个不同的时候 就算是别人的服务器
-
这个时候就会触发同源策略的限制
-
触发了同源策略的限制 就算跨域
-
默认情况下 如果不处理 都是会跨域的
html
<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) 跨域资源共享 不管你浏览器什么端口允许浏览器跨服务器发起请求 #后端解决跨域#修改后端代码
javascript
做法 就是在请求头中 添加
Access-Control-Allow-Origin: * //表示所有域名都可以访问打开后端代码：找到app.js
前提是先下载好 cors
javascript
const cors = require('cors')
app.use(cors())
2-jsonp方案
不是特别常用了，，面试时候会问
为什么jsonp可以借助script 标签 实现跨域？ 因为script标签的src属性比较nb的天生是 不受浏览器同源策略的限制
<script src="XXXXXXXXXX"> </script>
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>
<!-- 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>百度搜索
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>