28_跨域

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的天生是不受浏览器同源策略的限制

<!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>