异步请求的处理方案

最新推荐文章于 2023-03-16 21:54:08 发布

qq_39125445

最新推荐文章于 2023-03-16 21:54:08 发布

阅读量880

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_39125445/article/details/97394386

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.iterator迭代器

Iterator 的作用有三个;一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

方法next()

首先执行第一次next()方法，指针对象iterator中的第一个成员，后面执行第二个next()方法时，指向第二个成员，以次类推直到执行到return结束

使用代码模拟迭代器中next方法

function fib(names){
    let index=0
    return {
        next:function(){
            return  index<names.length?
            {value:names[index++],done:false}:
            {value:undefined,done:true}
        }
    }
}
var arr=[45,78,45,78,78];
const arr1=fib(arr);
console.log(arr1.next());
console.log(arr1.next());
console.log(arr1.next());
console.log(arr1.next());
console.log(arr1.next());
console.log(arr1.next());

模拟结果

2.generator生成器

Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态
理解：相当于一个状态管理器，有多个状态的情况，yelid就是一个暂停，执行一次，暂停一次。
实例：两种方法制作斐波拉契
第一种：普通函数封装，打印出来一个数组。

function fib(max) {
            var a = 0;
            var b = 1;
            var arr = [0, 1];
            while (arr.length < max) {
                [a, b] = [b, a + b];
                arr.push(b);
            }
            return arr;
        }
        console.log(fib(7))

第二种：generator生成器封装，一次一次打印出来。


        function* fib2(max) {
            var a = 0;
            var b = 1;
            var n = 0;
            while (n < max) {

                yield a;
                [a, b] = [b, a + b];
                n++;
            }
            return
        }
        var a = fib2(6);
        for (let i of a) {
            console.log(i)
        }

3.for of使用

for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。注意普通对象是没有iterator接口的。

4.封装fetch的增删查改

    <script>
        class request {
            //get查询
            //提供查询的url
            get(url) {
                return new Promise((resolve, reject) => {
                    fetch(url)
                        .then((res) => {
                            return res.json();
                        })
                        .then(data => {
                            resolve(data)
                        })
                        .catch(err => {
                            console.log(err)
                        })
                })

            }
            //post添加
            //提供添加的url和要添加的数据
            post(url, data) {
                return new Promise((resolve, reject) => {
                    fetch(url, {
                            method: "post",
                            headers: {
                                "content-type": "application/json"
                            },
                            body: JSON.stringify(data)
                        })
                        .then(res => {
                            return res.json();
                        })
                        .then(data => {
                            resolve(data);
                        })
                })
            }
            //put修改
            //提供修改的url和要修改的数据
            put(url, data) {
                return new Promise((resolve, reject) => {
                    fetch(url, {
                            method: "put",
                            headers: {
                                "content-type": "application/json"
                            },
                            body: JSON.stringify(data)
                        })
                        .then(res => {
                            return res.json()
                        })
                        .then(data => {
                            resolve(data)
                        })
                })
            }
            //删除
            //提供删除的url
            delete(url) {
                return new Promise((resolve, reject) => {
                    fetch(url, {
                            method: "delete",
                            headers: {
                                "content-type": "application"
                            }
                        })
                        .then(res => {
                            return res.json();
                        })
                        .then(data => {
                            resolve(data);
                        })
                })
            }
        }
        //测试get
        var http = new request();
        http.get("https://jsonplaceholder.typicode.com/todos")
            .then((data) => {
                console.log(data);
            })
            .catch(err => {
                console.log(err)
            })
        //测试post
        var data = {
            userId: "2",
            "id": 2,
            "title": "111delectus aut autem",
            "completed": false
        }
        http.post("https://jsonplaceholder.typicode.com/todos", data)
            .then(data => {
                console.log(data);
            })
        //测试put
        var data1 = {
            userId: "2",
            "id": 2,
            "title": "111delectus aut autem",
            "completed": false
        }
        http.put("https://jsonplaceholder.typicode.com/todos/1", data1)
            .then(data => {
                console.log(data);
            })
        //测试delete
        http.delete("https://jsonplaceholder.typicode.com/todos/1")
            .then(data => {
                console.log(data)
            })
    </script>

5.使用async和await封装fetch增删查改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        class request {
            //get查询
            //提供查询的url
            async get(url) {
                var response = await fetch(url)
                var data = await response.json();
                return data;

            }
            //post添加
            //提供添加的url和要添加的数据
            async post(url, data) {
                var res = await fetch(url, {
                    method: "post",
                    headers: {
                        "content-type": "application/json"
                    },
                    body: JSON.stringify(data)
                })
                var data = res.json();
                return data;

            }
            //put修改
            //提供修改的url和要修改的数据
            async put(url, data) {

                var res = await fetch(url, {
                    method: "put",
                    headers: {
                        "content-type": "application/json"
                    },
                    body: JSON.stringify(data)
                })
                var data = res.json();
                return data;

            }
            //删除delete
            //提供删除的url
            async delete(url) {

                var res = await fetch(url, {
                    method: "delete",
                    headers: {
                        "content-type": "application"
                    }
                })
                var data = res.json();
            }
        }
        //测试get
        var http = new request();
        http.get("https://jsonplaceholder.typicode.com/todos")
            .then((data) => {
                console.log(data);
            })
            .catch(err => {
                console.log(err)
            })
        //测试post
        var data = {
            userId: "2",
            "id": 2,
            "title": "111delectus aut autem",
            "completed": false
        }
        http.post("https://jsonplaceholder.typicode.com/todos", data)
            .then(data => {
                console.log(data);
            })
        //测试put
        var data1 = {
            userId: "2",
            "id": 2,
            "title": "111delectus aut autem",
            "completed": false
        }
        http.put("https://jsonplaceholder.typicode.com/todos/1", data1)
            .then(data => {
                console.log(data);
            })
        //测试delete
        http.delete("https://jsonplaceholder.typicode.com/todos/1")
            .then(data => {
                console.log(data + "4")
            })
    </script>
</body>

</html>

6.Map和Set数据结构

map和set数据结构的长度都是使用.size属性测试，由此回想数组使用length属性测试长度，对象这种键值对不好测试，就使用Object.keys(对象名).length借调Object的方法来使用

var a = {
    name: "zhuyu",
    age: 20,
    weight: 120,
    height: 170
}
console.log(Object.keys(a).length);
console.log(Object.values(a).length)

set定义等常用方法

var set = new Set([12, 45, 78, 89]);
set.add('zhuyu');
set.has("zhuyu");
set.delete("zhuyu");

map定义等定义方法

const map1=new Map();
//设置key键
key1="haha";
key2={};
key3=function(){};
map1.set(key1,'value of');
map1.set(key2,"nice");
map1.set(key3,"hahaha");
console.log(map1.get(key1));

map,set转换为数组，使用Array.from();
map

for(let [key,value] of map1){
    console.log(`${key}=${value}`);
 }

 for(let key of map1.keys()){
     console.log(key);
 }

 for(let key of map1.values()){
    console.log(key);
}

set

console.log(Array.from(set1));

生成器和迭代器,数组，类数组对象的遍历专用方法for of，必须要实现iterator对象
对象专用for in

7.class继承

    class Person {
        constructor(options) {
            this.color = options.color;
        }
        drive() {
            return "失败";
        }
    }

    var p = new Person({
        name: "haha",
        color: "red"
    })
    console.log(p.color);
    console.log(p.drive());

    class Student extends Person {
        constructor(options) {
            super(options);
            this.title = options.title;
        }
    }

    var stu = new Student({
        title: "hihi",
        color: "blue"
    })
    console.log(stu.title);
    console.log(stu.color);