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对象1
await 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);
})
// XXX
console.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封装 后面学框架用的
Document
跨域
什么是跨域？浏览器发起网络请求的时候会报一个跨域的错。
正常请求
从我的页面去请求weibo显示跨域错误
因为浏览器有同源策略的限制
同源策略：协议，域名，端口号有一个不一样时 浏览器认为是不同的域，请求不到返回的数据(就是不让访问"认为不是一家人")
浏览器的域：http://127.0.0.1:5500/(当前前端页面)
服务器的域：Sina Visitor System
http 默认端口号 80
https默认端口号是 443
-
注意：同源策略是浏览器的，服务器没有这个东西
-
当我们想向别人的服务器发起请求时，会被阻止，因为有同源策略的限制
-
别人的服务器：
-
当你请求的地址 的 协议、域名、端口号 有一个不同的时候 就算是别人的服务器
-
这个时候就会触发同源策略的限制
-
触发了同源策略的限制 就算跨域
-
默认情况下 如果不处理 都是会跨域的
响应头: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的天生是 不受浏览器同源策略的限制
Document
百度搜索
Document