封装一个ajax
function ajax (options){
//先准备一个默认值
var defInfo={
url: ' ',//地址不需要默认值
type='get',//请求方式默认为get
async: false,//默认是异步
data:' ',//参数没有默认值
dataType:'string',//默认不需要执行json.parse
success(){}//默认是一个函数
}
//先来判断一下有没有传递url 如果没有，直接抛出异常
if(!options.url){
throw new Error('url 必须传递')
}
//有了url以后 我们就把用户传递的参数和我们的默认数据合并
for（let key in options）{
defInfo [key] = options[key]
}
}
Promise 是一个ES6的语法 是用来专门解决异步回调地狱的问题
什么是回调函数？
回调函数就是把函数A当作参数传递到函数B中，在函数B中以形参的方式进行调用
function a(callback){
callback()
}
function b (){
console.log('我是函数B')
}
a(b)//b的实参 值 赋值 形参 callback
promise 就是一个语法
我们的每一个异步事件 在执行的时候 都会有三个状态 执行中/成功/失败
因为它包含了成功的回调函数 我们就可以使用promise来解决多个ajax发送问题
new Promise(function(resolve, reject){
ajax({
url:'第一个请求'，
success(res){
resolve(res)
}
}).then(function(res){
//准备发送第二个请求
return new Promise(function(resolve, reject){
ajax({
url:'第二个请求'，
data: {a: res.a, b: res.b},
success(res){
resolve(res)
}
})
})
}).then(function(res){
ajax({
url: '第三个请求'，
data: {a: res.a, b: res.b },
success (res) {
console.log(res)
}
})
})
这个时候 我们的代码就改观了很多 方便维护了 但还远远不够 还需要更加简化代码
需要用到一个 ES7 的语法 async await 这个语法是回调地狱的终极解决方案
语法
async function fn (){
const res1 = await promise对象1
const res2 = await promise对象2
const res3 = await promise对象3
}
//await promise对象1 等着promise对象1 内部的异步操作执行完以后再去执行 第二行代码 await promise对象2
//promise 对象1 的异步操作完成以后 才会执行promise2 , promise2执行完以后才会去执行promise3
这是一个特殊的函数方式
可以把异步代码写的看起来像同步代码
只要是一个 promiser 对象，那么我们就可以使用 async/await 来书写
async function fn() {
const res = await new Promise(function (resolve, reject) {
ajax({
url: '第一个地址',
success (res) {
resolve(res)
}
})
})
// res 就可以得到请求的结果
const res2 = await new Promise(function (resolve, reject) {
ajax({
url: '第二个地址',
data: { a: res.a, b: res.b },
success (res) {
resolve(res)
}
})
})
const res3 = await new Promise(function (resolve, reject) {
ajax({
url: '第三个地址',
data: { a: res2.a, b: res2.b },
success (res) {
resolve(res)
}
})
})
// res3 就是我们要的结果
console.log(res3)
}
