本文介绍了Promise的基本使用，包括新建Promise、状态转换和then的处理。接着详细讲解了axios的HTTP请求过程，包括get、post、put和delete方法，并探讨了axios相对于jQuery的优势。此外，还讨论了axios的拦截器机制和如何取消请求。
目录
Promise
new Promise((resolve,reject)=>{}) ES6中new一个Promise对象就处于pending’
调用resolve() 就是属于成功状态
调用reject() 就处于失败状态
用then() 来处理回调函数 第一个参数是成功的回调，第二个参数是失败的回调
new Promise((resolve, reject) => {
resolve('成功状态');
}).then(value => {
//成功的回调函数
}, reason => {
//失败的回调
})如果是执行resolve() then就会进行成功的回调 调用参数为value的方法
如果有多个then 假如是成功的 就一次执行then里面的成功的回调函数,多个then 就是产生多个微任务队列，一个个执行
微任务队列也是得主线程的任务执行完了 才来轮询微任务队列
微任务是优先宏任务执行的 主线程=》微任务=》宏任务
举例说明执行顺序：
new Promise((resolve, reject) => {
setTimeout(function() {
console.log('宏任务');
}, 0);
resolve('微任务');
}).then(value => {
console.log(value);
}, reason => {
//失败的回调
})
console.log('主线程');
状态中转：状态改变不可逆
let p1 = new Promise((resolve, reject) => {
// reject('失败');
setTimeout(function() {
resolve('成功');
}, 2000)
});
new Promise((resolve, reject) => {
resolve(p1); //p1是什么状态 就执行什么状态的回调 相当于这条语句是上面的 resolve('成功')
}).then(msg => {
console.log(msg);
}, error => {
console.log(error);
})
结果是调用失败 因为到reject就去执行then了 后面成功回调就不管了 单向不可逆
既 成功或者失败的情况只能触发前面的那个
new Promise((resolve, reject) => {
reject("失败")
resolve('成功');
}).then(msg => {
console.log(msg);
}, error => {
console.log(error);
})
</script>
</html>Promise.then也是一个Promise,但是除了第一个then根据状态来回调的，Promise.then().then…都是执行成功回
new Promise((resolve, reject) => {
reject("失败")
}).then(msg => {
console.log(msg);
}, error => {
console.log(error); //执行失败
}).then(a => {
console.log('成功'); //执行成功
}, b => {
console.log('失败');
}).then(a => {
console.log('成功'); //执行成功
}, b => {
console.log('失败');
})
Promise链式结构 成功可通过return 传递个下一个then回调 不return后面成功回调函数就拿不到，可以做处理再return 给下一层
还可以return一个Promise对象 return 出来的就是她的状态，上一级成功的回调就会执行下一级的成功回调
new Promise((resolve, reject) => {
resolve('成功1')
}).then(msg => {
return new Promise((resolve, reject) => {
resolve('解决')
})
}).then(a => {
console.log(a); //解决
})
直接return 后面的then默认调用成功的回调
new Promise((resolve, reject) => {
reject('...')
}).then(msg => {}, error => {
//return error; 这个默认后面的then默认调用成功的回调
return new Promise(null, error => {
error('///'); //这样才会让后面的then调用失败的回调
})
}).then(a => {
console.log(a);
}, b => {
console.log('失败');
})axios
HTTP请求交互的基本过程
请求报文：
请求头中Content-Type 设置请求体类型 请求体是username=tom&pwd=123这种类型的就是第一种请求体
HTTP响应报文
响应体类型Content-Type:text/html ;charset=utf-8 表示是响应体以html格式，也可以是text/json 表示json格式的响应体 charset 表示字符编码
Set-Cookie 服务器生成cookie 给浏览器 浏览器将Cookie带给浏览器
用于文件上传
get请求只有urlEncode 就是 上图post的第4种请求参数格式
数据请求不止有post get请求：（不只4种）
请求方式不能决定操作的是非REST api
axios 中用get方法 获取服务器数据
.then()是成功的回调 函数response 中response.data就是获取的数据
/1 与 ?id=1区别 /1是精确查找 ？id=1 是筛选
axios.post 向服务器传输数据
axios.put()方法 通过接口修改服务器数据 修改3号数据
axios.delete() 通过接口删除服务器数据 返回一个空对象
xhr概念：
对服务器来说都是http请求，区别在于对于浏览器来说 一般请求会刷新页面，ajax请求不会刷新新页面 是局部刷新
ajax请求获取到的数据 ，需要自己手动处理，一般的请求获取到的数据，会自己刷新页面显示在页面上
post发送的json格式的数据的时候，就要设置请求头的value为 application/json,有时候用urlEncoded格式数据
为什么get方法就向服务器发送一次请求 post put delete 发送2次请求 先提前发送一次通知请求头，再发请求体 因为get不改变数据，对接口数据影响小 直接拿就行
为啥vue推荐axios 发送ajax 因为用jquery引入一整个库，而axios是轻量级的
jQuery是以回调函数形式 axios 返回一个promise对象
拦截器：请求拦截器 再发送请求前调用函数 响应拦截器：再发回响应之后调用函数，相当于地铁进站出站统一再一个入口刷卡 每一次请求，返回的做统一处理 代码复用
axios方法：
除了以方法的形式发送请求,还可以以函数形式，参数为配置对象，query 参数在params对象里面写 其他在data对象里面写
可以将公共路径提出来 作为默认路径：
axios.defaults.baseURl (不写方法默认是get)
以函数方式发送请求，一定要写method 不然默认是get 当data是对象类型的时候，默认发json格式的数据给服务器，有的服务器不支持json格式数据，后面有解决方法
同理可以做改动
删除数据：
重难点语法： axios.create() 拦截器 取消请求
axios.create()
直接用axios（{}）.then就能发送请求，为什么需要create()方法创建的axios访问呢
因为当多个接口，在create()方法写公共部分，增强代码复用 这里instance当axios对象
产生的instance 也是相当于axios(除了没有取消请求和批量发请求)
发送请求的时候也是可以通过函数，或者对象的方式来发送
请求拦截器：（请求之前调用） axios.interceptors.request.use(成功的回调，失败的回调)
本质是回调函数
响应拦截器：响应之后执行回调 同样也有成功和失败的回调
拦截器成功的回调一定要将 config resopnse return出来 因为promise是链状的，一个一个任务的执行，前面不返回，后面任务拿不到 所以就会拿不到数据
假如没有return respones 下面的响应拦截器就拿不到response axios也拿不到response 就会报错、、
同样的如果不return Promise.reject(error) 出错了 到下一个任务的时候，也会到正确的回调里
先执行请求拦截器的（后面的先执行） 再执行响应拦截器 最后执行axios的回调
取消请求: c就被保存在变量cancel中 要取消直接调用cancel()
当产生回调的时候，就将cancel置为null 都执行回调了请求成功了说明，所以取消请求函数就没用了
发出请求了 但是还没拿到数据，就被取消了 就会出现下面的情况 强制取消请求
失败的回调函数打印的结果就是强制请求取消 error不是error类型的对象，是Cancel
一般的请求失败就是error类型的错，点击取消请求，强制请求终止，失败的回调函数error就变了
所以在调用失败的回调函数里面可能有俩中错误。一个是取消请求的一个是真的有错请求失败，可以通过isCancel()来判断出来
多个axios时候可以将公共内容放在axios.create({})里面
当出现对请求做统一处理的时候，可以在拦截器中实现
如为了实现发一次请求就将上次请求取消
return new Promise(()=>{}) 中断promise链
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
