promise
<!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>
<script>
// 1.Promise代表的是一个异步操作 它是构造函数 new Promise
// 2.new Promise()时,要传递一个实参,这个实参是回调函数,这个函数会立即执行
// 3.在回调函数中内部一般写的是异步代码
// 4.Promise的原型上一些方法,这些方法是可以被实例调用 then catch finally
// then catch finally 里面的回调函数都是事件循环eventloop的微任务
// 5.then方法的第一个参数函数会传递给resolve,第二个参数函数会传递给reject
// Promise的实例的状态
// 1.等待 pending
// 2.成功 fulfilled
// 3.失败 rejected
// let p = new Promise(function(resolve,reject){
// console.log(123);
// ...异步代码
// 成功时:
// resolve()
// 失败时:
// reject()
// })
// console.log(p);
// p.then(function(){},function(){})
// p.then(function(){}).catch(function(){})
// 复习Promise的静态方法
// 静态方法:将方法挂载到函数上,这个方法可以称为静态方法
Promise.all()
Promise.race()
// Promise.reject() => p = new Promise(function(resolve,reject){ reject() })
// console.log(Promise.reject("失败1"));
// console.log(new Promise(function(resolve,reject){ reject("失败2") }));
let p = new Promise(function(resolve,reject){
reject("失败2")
})
p.catch(function(err){
console.log(err);
})
// Promise.resolve() => new Promise(function(resolve,reject){ resolve() })
</script>
</body>
</html>
async_await
<!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>
<script>
// async_await是解决异步终极解决方案
// 语法: 声明异步函数
// 异步函数返回值: 永远是Promise实例
// 1.没有return undefined
// 2.有return 普通数据
// 3.有return promise
// async function test(){
// await 一般跟promise
// }
let p = new Promise(function(resolve,reject){
resolve('成功')
})
async function test(){
return p
}
// console.log(test())
// console.log(test().then(function(res){console.log(res);}))
console.log(test())
</script>
</body>
</html>
解决跨域的三种方法
实现反向代理(发送ajax —>静态服务武器(浏览器)----->后台服务器)
配置理解
1.怎么实现
2.具体操作简单理解 —>
// before: require('./mock/mock-server.js')
// 配置代理
proxy: {
// 请求时的路径中包含/api 就会走代理服务器 (可以显示多个)
// 自己写的路径不跨域http://localhost:8888/api/sys/login
// 真实的接口路径http://www.jd.com/api/sys/login
// 自己写的路径不跨域http://localhost:8888/api/sys/login
// 真实的接口路径http://www.jd.com/sys/login
// http://localhost:8888/api/sys/login
// =>http://www.jd.com/api/sys/login
// =>http://www.jd.com/sys/login
// 发现/api 后 将显示的前面地址替换为 target: 'http:/ww/jd.com'
/* '/api': {
// target目标:真实接口服务器地址
target: 'http:/ww/jd.com',
// pathRewrite:路径重写
pathRewrite: {
'^/api': ''// 没有/api重新配置
}
} */
// http://ihrm-java.itheima.net/api/sys/login
'/api': {
target: 'http://ihrm-java.itheima.net'
}
}
配置vue-cli的反向代理，实现后端接口的跨域访问**
import axios from 'axios'
import {
Message } from 'element-ui'
// create an axios instance
// process.env当前进程的环境变量
const service = axios.create({
// 设置请求根路径
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
/* // 创建了axios实例, 使用的是自己的配置项
const instance = axios.create({
// 开发环境, 找 env.development, 找 VUE_APP_BASE_API 变量
// 生产环境, 找 env.production, 找 VUE_APP_BASE_API 变量
baseURL: process.env.VUE_APP_BASE_API, // 环境变量
timeout: 5000 // request timeout
})