• 欢迎大家分享资料!前往留言板评论即可!

promise浅析

合宙 模组资料网 5个月前 (05-15) 65次浏览 已收录 0个评论 扫描二维码

解释

Promise 是一个 javascript 对象,它代表了一个异步操作的最终完成或者失败。常用于控制异步操作的执行顺序,而且可以让异步方法像同步方法那样返回值。它不能立即取得异步方法的返回值,但是它可以代理这个值,一旦异步操作完成,就会以及将值传递给相应的处理方法。

ES6 的Promise对象是一个代理对象,被代理的值在Promise对象创建时可能是未知的,另外它允许你为异步操作的成功和失败分别绑定相应的处理方法。

用途

1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3、可以在对象之间传递和操作promise,帮助我们处理队列

状态

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

方法

  • resolve

  • reject

    触发promise状态的改变

  • then

  • catch

    两者都会返回一个 Promise。then最多需要有两个参数:Promise 的成功和失败情况的回调函数.

    catch 只会返回失败的情况.

  • all

    Promise.all() 方法返回一个Promise, 在可迭代(iterable)参数中所有的 promises 都已经解决了或者当iterable参数不包含 promise 时, 返回解决。或者返回拒绝, 当传递的 promise 包含一个拒绝(reject)时。

  • race

    Promise.race()方法返回一个 promise,并伴随着 promise对象解决的返回值或拒绝的错误原因, 只要 iterable 中有一个 promise 对象”解决(resolve)”或”拒绝(reject)”。

案例

  • mysql连接池
var mysql = require('mysql');
const { dbConfig } = require('../config.js');
var pool  = mysql.createPool(dbConfig);

var db = {};

db.q = function (sql,params) {
  return new Promise((resolve,reject)=>{
    // 取出链接
    pool.getConnection(function(err, connection) {
      if (err) {
        reject(err);
        return;
      }
      connection.query(sql,params, function (error, results) {
             // 释放连接
            connection.release();
            if(error) {
              reject(err);
              return;
            }
            resolve(JSON.parse(JSON.stringify(results)));  
      });
    });
  });
}

// 导出对象
module.exports = db;
  • 模拟axios
const URL_ERR = "地址错误"
const METHOD_GET = "GET"
const DEFAULT_CONTENT_TYPE = "application/json;charset=utf-8"

const myaxios = (url, ...arg) => {
    let options = arg[0]

    return new Promise((resolve, reject) => {
        // 参数检测
        let err = vaildContent(url, options)
        if (err) {
            reject(err)
        }
        // 参数解析
        let type = (options && options.method) ? options.method : METHOD_GET
        let contentType = (options && options.header) ? options.header : DEFAULT_CONTENT_TYPE
            //  application/x-www-form-urlencoded
            //  application/json
            // ...
        let params = setParams(contentType, options)
        let sUrl = setUrl(url, options)
            // 请求
        var xhr = new XMLHttpRequest();
        console.log(type, sUrl, contentType);

        xhr.open(type, sUrl, true);
        xhr.setRequestHeader("Content-Type", contentType);
        xhr.send(params);
        xhr.onreadystatechange = function() {
            console.log(xhr.readyState);
            if (xhr.readyState == 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText))
                } else {
                    // console.log(xhr);
                    let errObj = { status: xhr.status, errText: xhr.statusText }
                    if (xhr.responseText) errObj.errObj = errObj
                    reject(errObj)
                }
            }
        };
    })
}
const vaildContent = (url, opt) => {
    if (!url) {
        return URL_ERR
    }
    // TODO
    return null
}
const setParams = (contentType, opts) => {
    // contentType 对应不同的编码格式;这里默认JSON
    return opts.data ? JSON.stringify(opts.data) : null
}
const setUrl = (url, opts) => {
    let params = opts.params
    if (!params) return url
        // json
    if (opts.method.toUpperCase() == "GET") {
        let key = ""
        for (let i in params) {
            key += `&{i}={params[i]}`
        }
        key = "?" + key.slice(1)
        return url + key
    }
}

转载请注明原文链接:promise浅析
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址