promise和链式调用

Posted 2021-09-15 赵不悔

什么是链式调用

当年我真的不理解什么是链式调用，甚至我不知道什么是调用
后来接触了jQuery才知道原来这个就是链式
仿佛是当年老鹰抓小鸡，用手抓住上一个人

$("*").css({ background :"#000" }).width("100px").height("100px")

使用了class

class 将你输入的名称放入在盒子里的this.name

class Person {
    constructor(txt) {
        this.name = txt;
    }
    xx() {
        console.log(this.name + \'英俊\');
        return this;
    }
    oo() {
        console.log(this.name + \'潇洒\');
        return this;
    }
}
new Person("我").xx().oo()

---

Promise简单实用

首先为什么要解决异步请求。因为某一个事件非常重要！必须按顺序123加载才可以。
但是第二步的异步请求太慢，而第三步已经加载完毕。所以第二步提示undefined。
为了解决这个问题。出现了Promise简单实用

function a(){ return "我" }
function b(){ 
 return new Promise((res, rej)=>{
     setTimeout(()=>{
         res("爱")
     }, 3000)
 })
}
function c(){ return "倪" }

async function run(){  
console.log(a())
console.log(await b())
console.log(c())
}
run()

---

JS小demo
首先定制随机数，然后使用 new Promise回调函数，有两个形参！一个成功一个失败
valve 信息/值
reason 理由

function num(min, max){
    return Math.ceil(  Math.random() * (max-min)  ) + min
}


var p = new Promise((res, rej)=>{
    let a = num(1, 100)
    if(a <=30 )
    {
        console.log(a)
        res()
    }
    else{
        console.log(a)
        rej()
    }
})

p.then((val)=>{
    console.log("中奖"+val)
}, (reason)=>{
    console.log("失败"+reason)
})

---

Node小Demo
引入fs，然后在promise当中回调函数成功与失败
fs获取文件，回调两个！必须先 失败 后 成功

const fs = require("fs")

var p = new Promise((res, rej)=>{
    
    fs.readFile("./src/info.txt", (err, succ)=>{
        
        if(err) rej(err)
        res(succ)
    })
    
})


p.then(val=>{
   console.log( val.toString())
}, err=>{
    console.log(err)
})

• 基础上进行封装

function Paths(path)
{
   return new Promise((res, rej)=>{
       require("fs").readFile(path, (err, data)=>{
           if(err) throw rej(err)
           res(data)
       })
   })
}

Paths("./src/info.txt").then((val)=>{
    console.log( val.toString() )
},(reason)=>{
    console.log(reason)
})

• 运用node来帮助prpmise减少步骤
• 但是切记是const fs = xxx，而不是const fs require("fs")

const fs = require("fs")
const util =  require("util")

let a = util.promisify( fs.readFile )

a("./src/info.txt").then(val=>{
    console.log( val.toString() )
})

---

ajax小demo
我使用的是axios

<ul>
    <li v-for="(item, key) in list" :key="key">
        {{item.id}} {{item.title}}
    </li>
</ul>
<button @click="ck">测试</button>

<script>
    import axios from "axios"
    export default{
        data(){
            return{  list:[]  }
        },
        methods:{
            ck() {
                var api = "http://jsonplaceholder.typicode.com/posts"
                var p = new Promise((res, rej)=>{
                    axios.get(api).then((succ)=>{
                        res(succ)
                    }).catch((err)=>{
                        rej(err)
                    })   
                })
                
                p.then((val)=>{
                    this.list = val.data
                },(reason)=>{
                    console.log(reason)
                })
            }
        }
    }
</script>

---

Promise多次回调

其实就是怕你这次list调用了一次，我还想调用别的

var a = new Promise((res, req)=>{
    res("OK")
})

a.then((val)=>{
  alert(val)  
}).then((val)=>{
    console.log(val)
})

async

简单理解这个东西，其实他就是一个能把函数变成 promise的神器
编完之后反出来一个函数名加一个then就能显示你要的东西

可以放三样东西，一个成功两个失败
第一个就是非promise
第二个就是promise成功与否看见你给我什么了
第三个直接认输！上来就报错，懒得return

async  function xx(){
   return "成功率"

   return new Promise((res,rej)=>{
       rej("失败了！曹尼玛")
   })

   throw "失败了"
}


var a = xx()

console.log(a) //用来查看promise的信息的

a.then((val)=>{
    console.log(val)
},(err)=>{
    console.log(err)
})

await

上一节课说道async这个东西把所有转换成promise返给你
而这个await是你这个加载东西是否能拿到，拿到了就返给你。你再换成promise

async function xx() {
    var a = new Promise((res, rej) => {
        res("nb")
    })

    var b = new Promise((res, rej) => {
        rej("err")
    })

    var c = await 250

    var t1 =  await a//此时返回来的是 最终结果 一个值
    var t2 =  await b//会报错，想看结果
        try{
            var t2 =  await b
        }
        catch(err)
        {
            console.log(err)
        }
    var t3 = c//他就是纯数字反数字
}

console.log(xx())

双剑合并

这个就是传统的回调地狱，读取完还要接着上一个屁股后

var fs = require("fs")
fs.readFile("./src/a.txt", (err, data1)=>{
    if(err) throw err
    fs.readFile("./src/b.txt", (err, data2)=>{
        if(err) throw err
        fs.readFile("./src/c.txt", (err, data3)=>{
            if(err) throw err
            console.log(data1 + data2 + data3)
        })
    })
})

有了它，可以快读的解决！

var fs = require("fs")
var util = require("util")
var sb = util.promisify(fs.readFile)

async function xx()
{
    var a1 = await sb("./src/a.txt")
    var a2 = await sb("./src/b.txt")
    var a3 = await sb("./src/c.txt")
    console.log(a1+a2+a3)
}
xx()

或者

a.addEventListener("click", async function(){
    let b = await xxxxx
    console.log(b)
})

---

总结

他的异步请求其实只有这几件事
a1拿到数据返回，async反出来给xx()
如果错误那就返回错的原因

async function xx()
{
    var a1 = await sb("./src/a.txt")
    var a2 = await sb("./src/b.txt")
    var a3 = await sb("./src/c.txt")
    console.log(a1+a2+a3)
}
xx()