ES6之Promise实践练习

对过去两周所学的ES6知识做一下总结 ，理一下思路 加深记忆
自已的理解 有不对的请指正 共同学习
更详细的请访问文档 ECMAScript 6 入门

promise 是一种异步编程的解决方案

• 可以获取异步操作的消息
• 特点：
  1.对象的状态不受外界影响 promise对象代表一个异步操作
  有三种状态 Pending(进行中) fulfilled(已成功) rejected(以失败)
  2.一旦状态改变 就不会在变 任何时候都可以得到这个结果

// 实例化promise
const p=new Promise(function(resolve,reject){
            setTimeout(()=>{
                // let data="用户数据读取成功"
                // resolve(data)
                let err="数据读取失败"
                reject(err)
            },1000)
        })
 // 调用promise对象的then方法
        // 作用：为Promise实例添加状态改变时的回调函数
        p.then(
            function(value){
                console.log(value) // 用户数据读取成功
            },function(reason){
                console.log(reason) // 数据读取失败
            })
// 传统封装ajax
const p = new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            xhr.open("GET", "https://api.apiopen.top/getJoke");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response)
                    } else {
                        reject(xhr.status)
                    }
                }
            }
        })

        p.then(function(value){
            console.log(value)
        },function(reason){
            console.log(reason)
        })
       
// 传统封装ajax
function SendAjax(url) {
            return new Promise((resolve, reject) => {
                const x = new XMLHttpRequest()
                x.open("GET", url)
                x.send()
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            resolve(x.response)
                        }else{
                            reject(x.status)
                        }
                    }
                }
            })
        }

 SendAjax("https://api.apiopen.top/getJoke").then(value=>{
            // console.log(value)
            document.write(value)
        },reason=>{
            document.write(reason)
        })
   
// async awiat 
async function main(){
            let res= await SendAjax("https://api.apiopen.top/getJoke")
            document.write(res)
        }

        main()

• Promise_then
  调用then方法 then方法返回的是一个promise对象，对象的状态由回调函数的执行结果决定
  如果回调函数中返回的结果为非promise属性，状态为成功 返回值为成功对象的值

const p = new Promise(function (resolve, reject) {
            setTimeout(() => {
                resolve("数据导出成功")
                // reject("数据加载失败")
            }, 1000)
        })

const result = p.then(value => {
            console.log(value)
            //1 非 promise 类型的属性
            return 123
            //2 返回promise 对象   这里返回成功与否可以改变原来promise的返回的属性 
            //    return new Promise((resole,reject)=>{
            //        reject('失败')
            //    })
            //3 抛出异常
            // throw ("出错")
        }, reason => {
            console.warn(reason)
        })
        console.log(result)
        // 链式调用
        p.then(value => {

        }).then(value => {

        })

• promise_cath

const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // 设置 p 对象的状态为失败 并设置失败的值
                reject("出错了")
            })
        })

           //    p.then(value=>{},reason=>{
        //        console.warn(reason)
        //    })
        // 捕获发生的异常
        p.catch(reason => {
            console.error(reason)
        })

Promise 封装读取文件
安装node js
导入 const fs = require(“fs”)

function read_a(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./a.md',(err,data)=>{
            if(err) reject(err);
            resolve(data)
        })
    })
}

function read_b(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./b.md',(err,data)=>{
            if(err) reject(err)
            resolve(data)
        })
    })
}

function read_c(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./c.md',(err,data)=>{
            if(err) reject(err)
            resolve(data)
        })
    })
}

async function  main() {
    let a= await read_a()
    let b= await read_b()
    let c= await read_c()
    let d =a+'\n'+b+'\n'+c
    // console.log(a.toString())
    // console.log(b.toString())
    // console.log(c.toString())
    console.log(d.toString())
}