Promise 对象 - 爱码网

es6 Promise 对象

ps：每个案例都是基于上一个改造的

一、Promise 简介

Promise 是一个对象，从它可以获取异步操作的消息

案例1

新建项目

[demo]
  |-- src
    |-- index.html
    |-- index.js
  |-- webpack.config.js
  |-- package.json

demo/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "less-loader": "^4.0.5",
    "less": "^2.7.3",
    "style-loader": "^0.19.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.5"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

demo/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    index: './src/index.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.(js)$/,  // js-loader
        loader: 'babel-loader?presets[]=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract('css-loader')
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract('css-loader!less-loader')
      }
    ],
  },
  devServer: {
    contentBase: './build',
    inline: true,
    hot: true,
    before: (app) =>{
      app.get('/one.json', function(req, res) {
        res.json({ 
          user: 'promise',
          success: true
        });
      });
      app.get('/two.json', function(req, res) {
        res.json({ 
          age: '11',
          success: true
        });
      });
      app.get('/three.json', function(req, res) {
        res.json({ 
          hobby: 'basketball',
          success: true
        });
      });
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 启用热替换模块
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['index'] // 需要引入的js，对应entry的key
    }),
    new ExtractTextPlugin({ // 单独打包css
      filename: '[name].css'
    })
  ]
}

webpack 相关讲解戳这里

demo/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise</title>
</head>
<body>
</body>
</html>

demo/src/index.js

// console.dir() 可以显示一个对象所有的属性和方法。
console.dir(Promise)

运行 npm i , 运行 npm run dev , 打开 http://localhost:8080 效果如下

从上面的图中，可以看出 Promise 是一个构造函数，有 all、race、reject、resolve 这几个方法，原型上有then、catch等方法

Promise 的基本用法

// Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
// resolve 异步操作执行成功后的回调函数 
// reject 异步操作执行失败后的回调函数
const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

// 用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数
// then 方法可以接受两个回调函数作为参数, 第二个函数是可选的，不一定要提供
promise.then(function(value) {
  // resolve 异步成功的操作
}, function(error) {
  // reject 异步失败的操作
});

二、resolve、reject

案例2

demo/src/index.js

import $ from 'jquery';

const promise = new Promise(function(resolve, reject) {
  console.log('Promise');

  // 这里当 ajax 失败 ，或 success 不为 true 时，都认为是请求失败
  $.ajax({
    url: 'one.json',
    success: (data = {}) => {
      if (data.success) {
        resolve(data);
      } else {
        reject(data);
      }
    },
    error: (err = {}) => {
      reject(err);
    }
  })
});

promise.then(function(value) {
  console.log('resolved', value)
}, function(error) {
  console.log('rejected', '请求失败')
});