Promise模块化编程快速复盘

⚡️在学习了ES6的新特性后，还需要重点看下如何使用promise解决Callback Hell问题，代码部分有伪代码，逻辑简单，放心使用。

💃全文共计2681字，预计阅读10分钟。

promise

一、基本介绍

1. 传统Ajax异步操作，多个回调函数会产生Callback Hell
2. 设计解决Callback Hell问题
3. Promise是异步编程的一种解决方案
4. 语法上讲，Promise是对象，从它可以获取异步操作完的结果
5. Promise是ES6的新特性，部分浏览器不兼容

二、代码编排

Promise改进JQuery发送的Ajax

$.ajax({
  url: 'xxxxx',
  success(result){
    log("第一次ajax请求",result),  	
    $.ajax({
    url: `xxxxx${result}`,
    success(result){
      log("第二次ajax请求",result),  	
    },
    error(err){
      log("第二次出现异常,err)
    }
    })
  },
  error(err){
    log("出现异常,err)
  }
})

promise发起多次请求(链式调用)

let p = new Promise((resolve,reject)=>{
    $.ajax({
      url: 'xxxxx',
      success(result){
        log("promise第一次请求",result),
        resolve(result);
      },
      error(err){
      log("出现异常,err);
      reject(err);
      }
	})
})
p.then((result)=>{
    return new Promise((resolve,reject)=>{
      $.ajax({
    	url: `xxxxx${result}`,
    	success(result){
      	log("第二次ajax请求",result),  	
        resolve(result);
    	},
    	error(err){
      	log("第二次出现异常,err)
        reject(err);
    	}
    })
  })
}).catch((err)=>{
  //这里对多次封装的请求错误信息处理
})

注意点：

1. 请求成功后要将数据存放在resolve中，否则then失效
2. reject类似于catch，把错误信息封装
3. 多层请求要return给下一个调用者

promise的代码重排

// 抽取重复new Promise的过程
function get(url,data){
	return new Promise((resolve,reject)=>{
    $.ajax({
      url:url,
      data:data,
      success(result){
        resolve(result)
      },
      error(err){
        reject(err)
      }
    })
  })
}
// 直接开始套娃
get("xxxx",_)
.then((result)=>{
  return get("xxxxxx);
})
.then((result)=>{
  return get("xxxxxx);
}).catch((err)=>{
  
})

ps：为什么要return，这里其实相当于传入一个箭头函数作为回调函数，如果不return，仅仅是执行代码块中的功能，换句话来讲，不return一个promise对象，怎么获取then方法。

模块化编程

一、基本介绍

1.1为什么要模块化

1. 传统模式开发缺点
   1. 命名冲突
   2. 文件依赖
2. js代码越来越多，引入模块，就可以直接使用其他编写好的代码
3. js使用module概念实现模块化编程
4. 模块化也是ES6新特性，意味着有的浏览器是不兼容的

2.2模块化的分类

1. CommonJS模块化/ES5
2. ES6模块化编程

二、CommonJS模块化

2.1介绍

1. 每个js是一个模块，自己的作用域，里面的内容都是私有的，对其他js不可见
2. CommonJS使用module.exports = { } / exports = { }导出模块，使用let / const xxx = required(“xxx.js”)

2.2实战

//function.js

const person = {
  name:"yovvis",
  age:12
}
const m = m=>m+1

export = {
  person,m
}

// use.js
const m = required("./function")
const {person} = required("./function")
// m就是function里导出的对象

三、ES6导出

3.1三种导出方式

1. export{ 名称 }
2. export x = { }
3. export default { }

使用import { } from “xxx.js” / import xxx from “xxx.js”

3.2实战

三种导出

//function.js
// 批量导出
 const person = {
  name:"yovvis",
  age:12
 },
 const m = m=>m+1
 export {
   person,m
}

// 其他导出
export const person = {
  name:"yovvis",
  age:12
}
export const m = m=>m+1

// 默认导出 {} 可以相当于一个对象，导入的时候xxx不需要和属性方法名一致
export default {
  const person = {
    name:"yovvis",
    age:12
  }
  const m = m=>m+1
}

导入

// user.js
// 解构的必须要和导出的对象一样
import {person,m} from "./function"

3.3注意事项

1. ES6的模块化无法在Node.js中执行，需要用Babel转码ES5后再执行
2. export不仪可以导出对象，一切JS变量都可以导出（默认都是CommonJS导出也可以）。比如：基本类型变量、函数、数组、对象
3. 没有导出的不能使用
4. ES6有导出方式较多，不同的导出方式对导入方式也有一定影响