- $.Ajax({
- url:"url1",
- type:"get",
- data:{para1:"data1"},
- success:function(res1){
- $.Ajax({
- url:"url2"+res1,
- type:"get",
- data:{para2:"data2"},
- success:function(res2){
- $.Ajax({...})
- }
- })
- },error:function(){
- }
- })
就先别说维护了, 就是写的时候, 一不小心少个小括号或者花括号, 那也是一场灾难呐. 后来小编了解到在 es6 中, 称这种情况叫 callback hell(回调深渊). 在 es6 中提供了 Promise, 可以很好的解决这种问题, 当然了, 在 vue 中, 在前后端分离项目中, 也大量的使用了这种语法.
一, 基本语法
- let p = new Promise((resolve,reject) =>{ // 参数有两个, resolve 是成功之后的回调函数, reject 是失败之后的回调函数
- setTimeout(() => {
- console.log("school")
- resolve() // 手动调用成功回调函数
- },1000)
- }).then(() => { // 这个是成功之后执行的函数, 不能省略
- console.log("成功")
- },() => { // 这个是失败后的执行函数, 可以省略
- console.log("失败!")
- })
- // school 成功
二, 异步之后的参数传递
- let p = new Promise((resolve,reject) =>{
- setTimeout(() => {
- console.log("school")
- resolve("成功")
- },1000)
- }).then((res) => { // 这个是成功之后执行的函数, 不能省略, 输出内容通过参数来传递
- console.log(res)
- },() => { // 这个是失败后的执行函数, 可以省略
- console.log("失败!")
- }) // school 成功
三, 实例: 通过封装原生 Ajax 来实现功能 (目录结构: 在当前文件下存在一个 static 文件夹, 文件夹内有三个文件 a.JSON,b.JSON,c.JSON. 每个文件内是一个对象, 分别为 {a:"我是 a"},{b:"我是 b"},{c:"我是 c"})
1, 存在部分问题
- // 封装 Ajax 方法
- function Ajax(url, callback) {
- // 1, 创建 XMLHttpRequest 对象
- var xmlhttp
- if (Windows.XMLHttpRequest) {
- xmlhttp = new XMLHttpRequest()
- } else { // 兼容早期浏览器
- xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
- }
- // 2, 发送请求
- xmlhttp.open('GET', url, true)
- xmlhttp.send()
- // 3, 服务端响应
- xmlhttp.onreadystatechange = function () {
- if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
- var obj = JSON.parse(xmlhttp.responseText)
- // console.log(obj)
- callback(obj)
- }
- }
- }
- new Promise((resolve,reject) => {
- Ajax('static/a.json',res => {
- console.log(res) // {a:"我是 a"}
- resolve()
- })
- }).then(res => {
- console.log("a 成功")
- new Promise((resolve,reject) => {
- Ajax('static/b.json',res => {
- console.log(res) // {b:"我是 b"}
- resolve()
- })
- })
- }).then(res => { // 这个时候就相当于空对象的 then
- console.log("b 成功")
- })
- // {a:"我是 a"} a 成功 b 成功 {b:"我是 b"}
2, 优化版本 1
- new Promise((resolve,reject) => {
- Ajax('static/a.json',res => {
- console.log(res) // {a:"我是 a"}
- resolve()
- })
- }).then(res => {
- console.log("a 成功")
- return new Promise((resolve,reject) => {
- Ajax('static/b.json',res => {
- console.log(res) // {b:"我是 b"}
- resolve()
- })
- })
- }).then(res => { // 这个时候就相当于空对象的 then
- console.log("b 成功")
- })
- // {a:"我是 a"} a 成功 {b:"我是 b"} b 成功
3, 优化版本 2: 封装 return new Promise
- function getPromise(url){
- return new Promise((resolve,reject) => {
- Ajax(url,res => {
- resolve(res)
- })
- })
- }
- getPromise("static/a.json")
- .then(res => {
- console.log(res)
- return getPromise("static/b.json")
- })
- .then(res => {
- console.log(res)
- return getPromise("static/b.json")
- })
- .then(res => {
- console.log(res)
- })
- // {a:"我是 a"} {b:"我是 b"} {c:"我是 c"}
来源: http://www.bubuko.com/infodetail-3787494.html