阶段总结node模块化 Ajax。promise

最新推荐文章于 2024-07-17 13:47:47 发布

じò ぴé yAn

最新推荐文章于 2024-07-17 13:47:47 发布

阅读量163

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_73174167/article/details/127932547

版权

node模块化

+ module.exports 每个js文件里面都有一个module对象里面有exports成员

+ require 导入导入这个js文件的时候会执行这个js文件里面的代码

内置模块

+ fs

+ fs.readFile(路径,'utf-8',回调) 异步读取

+ fs.readFileSync 同步读取文件

+ fs.writeFile(路径,写入的内容,回调) 异步写入

+ fs.writeFileSync 同步写入

+ fs.appendFile(路径,写入的内容,回调) 异步依次写入

+ path

+ path.join() 组装相对路径

+ path.resolve() 组装绝对路径

+ path.parse() 解析路径

+ url

+ url.parse(url,是否深度解析(默认false)) 解析url地址 query

+ http

+ 第三方的模块

npm 包管理器

+ npm init -y

+ 会生成一个package.json

+ npm i 包名@版本号 --save -g

--save 就是保存在生产环境

--save-dev 保存在开发环境

-g 全局安装

+ node_modules 你下载的所有包都在这个里面

+ npm un 包名

+ 只要有package.json 后面我就可以直接 npm i

nrm

nrm test

nrm use taobao

http

+ 建立连接

+ 以请求报文的形式发送请求到服务端

+ 以响应报文的形式返回后端的响应

+ 断开连接

+ 三次握手

+ 第一次握手客服端发送连接请求

服务端接收到消息服务端就知道客服端能正常发送消息自己也能正常接收消息

+ 第二次握手服务端给客服端发送消息

客户端自己能正常发送能够正常接收知道服务端能正常接收正常发送

+ 第三次握手

为了防止已经失效的连接请求报文段突然又传到服务端，因而产生错误。

四次挥手

+ 客户端发送消息我要断开连接了

+ 服务端接收消息知道你要断开了发送一个消息给客户端说我知道了我准备一下

+ 客户端接收到消息以后再发送一次消息我真的断开了你再发送消息的时候我也不会回应了

+ 服务端接收到消息以后自己也断开再有消息也不会回应了

http和https的区别：

http的URL是以http://开头，而https的URL是以https://开头。
http是明文传输，安全性低，而https可以进行加密传输，身份认证。
http的标准端口是80，而https的标准端口是443。

+ cookie

+ 在浏览器存储关键信息的内存空间

+ 前后端都可以操作

+ 必须在服务端环境才能设置或者获取

+ 受域限制

+ 受路径限制

+ 时效性没有设置的话就是默认会话级可以设置过期时间

+ 大小 4kb 50条

+ 一次只能设置一条

document.cookie = 'key=value;expires=时间对象;path=/'

+ sessionStorage

+ 只能前端操作

+ 时效性会话级

+ 大小 5M

方法： + setItem getItem removeItem clear

+ localStorage

+ 只能前端操作

+ 时效性除非手动删除会一直存在

+ 大小 5M

方法： + setItem getItem removeItem clear

1.find 返回第一项满足条件的，如果没有满足的返回undefined

2.findIndex 返回第一项满足条件的索引

3.同步和异步

同步 + 前面报错后面不执行

异步 + 定时器延时器

Ajax封装：

 /*
                ajax_post请求 
        
                接收参数的时候 用一个对象接收 option
                @parmas {String} url 请求的地址  
                @parmas {Object} query 请求的参数   
                @parmas {Function} success  表示成功的时候的回调函数
                  @parmas {Function} error  表示失败的时候的回调函数
             */


        function  ajaxPost(option){
            const {url,query,success,error} = option
            // 判断有没有url
            if(!url){
                return  alert('url必传')
            }
            //创建实例化对象  
            let  xhr = new XMLHttpRequest()  
            
            // 设置请求地址和请求类型  
            xhr.open('post',url)

            // 设置请求头  
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

            if(query){
                var  str = ''

                for(let key in query){
                    str +=`${key}=${query[key]}&`
                }
                 str = str.slice(0,-1)  
            }
            // 发送  
            query?xhr.send(str):xhr.send(null)

            xhr.onreadystatechange = ()=>{
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        success && success(xhr.response) 
                    }else{
                        error && error(xhr.response)
                    }
                }
            }
        }         
            

        let  obj  = {
            url:'http://localhost:8888/test/fourth',
            query:{
                name:"zhangsan",
                age:25
            },
            success:(data)=>{
                console.log(data)
            }
        }

        ajaxPost(obj)

function ajaxGet(option) {
            if (!option.url) {
                return alert('url必传')
            }

            let xhr = new XMLHttpRequest()
            if (option.query) {
                var str = '?'
                for (let key in option.query) {
                    str += `${key}=${option.query[key]}&`
                }
                str = str.slice(0, -1)
            }
            option.query ? xhr.open('get', option.url + str) : xhr.open('get', option.url)

            // xhr.setRequestHeader('token','wangaho')
            // xhr.setRequestHeader('info','123456')

            xhr.send()

            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        option.success && option.success(xhr.response)
                    } else {
                        option.error && option.error(xhr.response)
                    }
                }
            }
        }

promise

+ 主要用来解决回调地狱

+ 把promise 当做一个状态机初始状态 pending 里面有两个函数 resolve 和reject

+ 通过resolve改变状态改变以后是成功的通过reject 改变以后的状态失败的

+ 状态一经改变不能恢复

+ var p = new Promise((resolve,reject)=>{})

+ then 成功时候的处理函数

+ catch 失败时候的处理函数

+ finally 不管成功还是失败都会执行

+ async await

+ 依靠一个函数

+ 必传和promise对象一起用

+ 只能获取成功的时候的数据

+ 不管成功还是失败都用resolve

  /* 
        async/await  ES7 
          解决回调地狱的终极方案
        + 主要需要和 promise对象一起使用   
        + 在一个函数里面使用  
        + 只能拿到成功的时候 结果   
        */

        async function fn() {
            var dataA = await ajaxGet({ url: "https://mock.apifox.cn/m2/1088284-0-default/32407331" })
            console.log(dataA)
            var dataB = await ajaxGet({ url: "https://mock.apifox.cn/m2/1088284-0-default/32407331", query: { num: dataA } })
            console.log(dataB)
            var dataC = await ajaxGet({ url: "https://mock.apifox.cn/m2/1088284-0-default/32407331", query: { num: dataB } })
            console.log(dataC)
        }
        fn()


        //  解决   async/await  不能捕获错误信息的方案   

        //  方案一：  本来错误解决的reject  也用resolve 去解决

        // 方案二： 可以使用try catch语法捕获错误信息

+ try catch

+ try{

}catch(err){

}finally{

}

+ 语法： async function fn(){

var res = await promise对象

}

+ promise 其他的方法

all : 所有的请求都返回以后统一把结果放在一个数组里面返回

all([请求1，请求2...]).then((res)=>{}).catch()

race: 多个请求发送的时候谁先返回就返回谁的结果