美文网首页
为什么要使用promise

为什么要使用promise

作者: 前端js | 来源:发表于2019-08-29 17:48 被阅读0次

起因

大家都知道做前端开发的时候最让人头痛的就是处理异步请求的情况,在请求到的成功回调函数里继续写函数,长此以往形成了回调地狱。

function load() {
    $.ajax({
        url: 'xxx.com',
        data: 'jsonp',
        success: function(res) {
            init(res, function(res) {
                render(res, function(res) {
                    // 一层一层又一层
                });
            });
        }
    }
}

load();


这样的代码看层级少了当然还是可以凑合看的,但是多起来的话,那就难以维护了,无论是开发者自身还是同事来接手项目,都是极其无奈的!还要我怎样,要怎样,怎样,样。

于是乎 出现了Promise

当年在听到关于Promise的报道的时候没有太多关注,只是知道是解决回调地狱问题的,一种异步请求解决方案而已。
后来在工作当中发现JQ也实现了相关的方法,上代码

$.get('xxx.php').done(function() {
    alert('成功的回调');    // 相当于Promise的resolve()
});

现在看来,真的和Promise差不多呢。那么我们回到今天的主角来
先介绍一下Promise的三种状态:

  • Pending 创建Promise对象时的初始状态
  • Fulfilled 成功时的状态
  • Rejected 失败时的状态

说完了状态直接上代码,我们得会用才行:
还以上面load函数的例子

  // then方法是用的最多的了
  // 按照then来执行成功和失败的回调函数
  function load() {
    return new Promise((resovel, reject) => {
        $.ajax({
            url: 'xxx.com',
            data: 'jsonp',
            success: function(res) {
                resolve(res);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}

// 用一下
load().then(data => {
    console.log(data);  // 请求到的数据
    console.log('请求数据成功');
}, err => {
    console.log('请求失败');
});

除了处理请求,Promise还可以写在普通的函数中

function init(options) {
    return new Promise((resolve, reject) => {
        if (options.id) {
            console.log('你是唯一')
            resolve(options.id);
        } else {
            console.log('不行,不行');
            reject()
        }
    });
}

init({id: 110})
    .then(id => {
        console.log(id);          // 110
        let obj = {id, nickname: '左夕'};
        return obj;
    })
    .then(other => {
        console.log(other);    // { id: 110, nickname: '左夕' }
    });


Promise.all和Promise.race有点类型
all是Promise的状态都为成功才表示成功
race是Promise的状态是有一个先成功的状态了,就表示成功
最近很火的axios其实就是调用了Promise,写法也是很相似的
由于它是第三方包,需要npm i axios安装一下

// 发个get请求
axios.get('user/', {
    id,
    username
}).then(res => {
    console.log(res);   // 成功
}).catch(err => {
    console.log(err);   // 失败
});

// 再来个post请求
axios.post('login/', {
    username,
    password
}).then(res => {
    console.log(res);   // 成功
}).catch(err => {
    console.log(err);   // 失败
});

// 也有all的操作
function getUser() {
    return axios.get('/user');
}

function sendMsg() {
    return axios.post('/info', {msg});
}

axios.all([getUser(), sendMsg()]).then(res => {})


总结一下:Promise常用的就是这些了,then返回的也是一个Promise对象,所以可以继续调用.then方法。有说的不对的地方,还望指出。

相关文章

  • JS基础:异步编程之Promise、async-await

    目录一. Promise 1. 为什么要使用Promise 2. Promise是什么 3. 如何使用Promis...

  • Promise

    1.es6为什么会出现promise/解决了什么问题 2.promise的使用场景 3.promise的使用方法 ...

  • 会用不如会造 - Promise

    为什么要自己造 Promise Promise已经是Ecmascript 6标准中的内容 Promise是asyn...

  • ES6 Promise 异步编程方案

    为什么使用 Promise ? Promise 是 ES6 提出的异步编程方案 ! ES6 之前,如果我们都是通过...

  • js es6 Promise

    1.为什么要使用Promise 为了解决回调地狱问题,ES6引入了Promise的概念 2.Promise的基本概...

  • 关于ES6的Promise的使用

    什么叫promise? 那我们为什么要使用promise? 比如我们在工作中经常会碰到这么一个需求,比如我使用aj...

  • 登录之promise

    一、思考: 为什么要把一些方法写到vuex里面1.写到vuex里面,会使用promise,在promise里面就会...

  • 关于Promise

    是什么?Promise是以最简单的方式处理异步操作的理想选择。 为什么?在promise之前,使用了事件(Even...

  • RN-ErrorUtils处理崩溃、promise错误

    ErrorUtils.js路径 promise路径 ErrorUtils使用 promise使用

  • 手写promise

    手写promise 带大家手写一个 promis。在手写之前我会先简单介绍一下为什么要使用promise、prom...

网友评论

      本文标题:为什么要使用promise

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