美文网首页
Promise简介

Promise简介

作者: 王哥来了 | 来源:发表于2018-07-26 11:56 被阅读0次

学promise来我这里肯定没错了
ECMAScript promise的到来就是为了解决AJAX嵌套的请求

         $.ajax({
            url: './t1.txt',
            dataType: 'text',
            success: data => {
                $.ajax({
                    url: './t1.txt',
                    dataType: 'text',
                    success: data => {
                        $.ajax({
                            url: './t1.txt',
                            dataType: 'text',
                            success: data => {
                                console.log(data);
                            },
                            error: err => {
                                console.log(err);
                            }
                        })
                    },
                    error: err => {
                        console.log(err);
                    }
                })
            },
            error: err => {
                console.log(err);
            }
        })

promise 他是在未来 或者某一个时间 执行的一些事情;先简单的看看的Promise实例:

//此时的是一进页面就会执行的一个实例
var promise1 =  new Promise((resolve, reject) =>{
// 当然这个 promise 不写 ajax 也行 随便写个if 判断也行 
$.ajax({
    url: './t3.txt',
    dataType: 'text',
    success: data =>{
        //当请求成功 调用promise 成功回调函数
        resolve(data);
    },
    error: err => {
        //当请求失败 调用 promise 失败回调函数
        reject(err);
    }
})
})
//promise1.then() 你可以看出来  第一个的回调函数是成功 第二个的回调函数是失败 
promise1.then((data)=>{
  console.log(data);
},(err)=>{
      console.log(err);
})

也许你会想现在不也和直接请求ajax一样吗没有什么区别 别着急吗?

var promise1 =  new Promise((resolve, reject) =>{
$.ajax({
    url: './t1.txt',
    dataType: 'text',
    success: data =>{
        resolve(data);
    },
    error: err => {
        reject(err);
    }
  })
})
var promise2 =  new Promise((resolve, reject) =>{
$.ajax({
    url: './t2.txt',
    dataType: 'text',
    success: data =>{
        resolve(data);
    },
    error: err => {
        reject(err);
    }
  })
})
var promise3 =  new Promise((resolve, reject) =>{
$.ajax({
    url: './t3.txt',
    dataType: 'text',
    success: data =>{
        resolve(data);
    },
    error: err => {
        reject(err);
    }
})
})
promise1.then((data)=>{
  console.log(data);
},(err)=>{
  console.log(err);
})
promise1.then((data)=>{
  console.log(data);
},(err)=>{
  console.log(err);
})
promise1.then((data)=>{
  console.log(data);
},(err)=>{
  console.log(err);
})

是不是这样看起来也挺繁琐 好了 不啰嗦了

 function getTxt(url){
//此时的是一进页面就会执行的一个实例
return new Promise((resolve, reject) =>{
    // 当然这个 promise 不写 ajax 也行 随便写个if 判断也行
    $.ajax({
        url,
        dataType: 'text',
        success: data =>{
            //当请求成功 调用promise 成功回调函数
            resolve(data);
        },
        error: err => {
            //当请求失败 调用 promise 失败回调函数
            reject(err);
        }
    })
  })
}
//Promise.all() 里面只有一个参数 那就是一个数组 数组里面的每一项必须是一个promise 实例对象
//当然 all 是什么意思 是全部  他要是只有一个没用请求过来的话 那就会直接执行 err 函数
// 成功力的回调函数 只有一个参数 也是一个数组 里面装的是  3个请求过来的 数据
Promise.all([getTxt('t1.txt'),getTxt('t2.txt'),getTxt('t3.txt')]).then((data)=>{
    console.log(data);
},(err)=>{
    console.log(err);
})

promise =》 承诺 状态一旦改变 就永远不会改变

promise 常用的方法我目前了解的就这几个,
如果大家有什么不懂得或者是不理解的可以留言哦

相关文章

  • Promise原理解析

    1、Promise 简介及使用 1.1、Promise 简介 Promise 对象是 CommonJS 工作组提出...

  • Promise 完全解读

    目录 一. Promise 简介Promise 是什么?我们为什么需要 Promise?Promise 能解决什么...

  • Promise简介

    学promise来我这里肯定没错了ECMAScript promise的到来就是为了解决AJAX嵌套的请求 pro...

  • promise 简介

    一、什么是Promise MDN对Promise的定义:Promise对象用于异步操作,它表示一个尚未完成且预计在...

  • Promise原理解析

    Promise原理解析 标签(空格分隔): Node.js Promise原理解析 简介 Promise 对象用于...

  • Promise分析总结(分析中...)

    什么是Promise Promise是抽象异步处理对象以及对其进行各种操作的组件 Promise简介 目前大致有下...

  • React 中对 Axios 的基本封装

    一、Axios 简介 Promise based HTTP client for the browser and ...

  • JavaScript Promise简介

    我们在之前的文章中简述了一下JS中的回调函数以及实现方式浅谈JavaScript的回调函数,其中谈到了promis...

  • JavaScript:Promise简介

    基本认识 Promise提供了一种异步过程的不同写法。回调函数是层层嵌套的,而Promise,类似于函数式的......

  • 34 – Promise 简介

    原文地址:https://dev.to/bhagatparwinder/promises-introduction...

网友评论

      本文标题:Promise简介

      本文链接:https://www.haomeiwen.com/subject/rptbmftx.html