首页 > 博客列表 > 0801-xhr和fetch异步编程、模块的导入导出、命名空间

博主信息

博文 35

粉丝 0

访问量 28981

专题推荐

更多>

一、xhr与fetch异步编程的步骤,实例演示。

XHR与Fetch的区别：
1.xhr基于传统的ajax。
2.fetch是现代的异步请求，推荐使用，基于Promise对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="display: grid;gap:2em;place-items: center center;">
    <button style="width: 200px;" onclick="getUser1(this)">XHR</button>
    <button style="width: 200px;" onclick="getUser2(this)">Fetch</button>
    <script>
        function getUser1(btn){
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 响应类型
            xhr.responseType = "json";
            // 配置参数,true表示异步请求，可以省略。
            // 不传get参数，默认返回全部用户，用table显示。
            let url = "http://website.io/Study/0801/website/users.php";
            // 如果有get参数，用户id，用ul列表显示。
            // url = 'http://website.io/Study/0801/website/users.php?id=1';
            xhr.open("GET", url, true);
            // 请求回调
            xhr.onload = ()=> {
                console.log(xhr.response);
                //将数组渲染到页面
                render(xhr.response, btn);
            }
            // 失败回调
            xhr.onerror = ()=> console.log("Error!");
            // 发起请求
            xhr.send(null);
        }
        function getUser2(btn) {
            let url = "http://website.io/Study/0801/website/users.php";
            // fetch所有操作是异步的，但通过then的使用，顺序可控。
            fetch(url)
                .then(function (response){
                    return response.json();
                })
                .then(function(json){
                    // 打印到控制台
                    console.log(json);    
                    // 页面渲染
                    render(json, btn);                
                })
        }
    </script>
    <script src="0801/js/function.js"></script>
</body>
</html>

点击XHR和Fetch获取数据效果：

ECMA2017中简化回调

    <script>
        // function getUser(btn) {
        //     // 请求自己的接口
        //     let url = "http://website.io/Study/0801/website/users.php";
        //     fetch(url)
        //         .then(response => response.json())
        //         .then(json => { 
        //             console.log(json);
        //             // 前端渲染
        //             render(json, btn);
        //         })
        //-----------以下非注释部分是简化的代码--------------
        // ECMA2017中，有async，await，用来简化异步回调方法
        async function getUser(btn) {
            // 请求自己的接口
            let url = "http://website.io/Study/0801/website/users.php";
            // 异步耗时，等待结果
            const response = await fetch(url);
            // 获取结果，转为json 
            const result = await response.json();
            console.log(result);
            // 前端渲染
            render(result, btn);
        }
    </script>

关于跨域

跨域：同源策略，仅允许协议相同，域名相同，端口相同，否则为跨域请求，一般是禁止的。图片和js脚本引用是可以跨域的，js脚本之内通常是不能发起跨域请求的。
// php中允许跨域请求，“”表示任何域名都可以过来跨域。
header(“access-control-allow-origin: “);

二、模块成员导出与导入,别名使用场景与命名空间演示

1. 模块的导入导出

为什么要用模块？

在js中，所有代码共用一个全局作用域：window，容易冲突。在js6中引入模块，来控制作用域。

作用域有哪些？

全局作用域
函数作用域
块作用域
模块作用域

js模块说明

一个模块就是一个js文档，模块有自己独立的作用域，模块中的成员默认都是私有，到处才能用。

———————模块成员的导出———————————————————
逐个导出
m1.js

// 逐个导出
    export let username = '用户1';
    export function hello(username) {
        return `Hello, ${username}`;
    }

test.html对导出的引用

    <!-- 默认浏览器是不支持模块的，需要指定type -->
    <script type="module">
        // 导入模块
        import {username, hello} from './m1.js';
        console.log(username);
        console.log(hello(username));
    </script>

统一导出
m1.js

// 统一导出（1）声明（2）导出
// 声明
let username = '用户1';
function hello(username) {
    return `Hello, ${username}`;
}
// 导出
export {username, hello};

test.html对导出的引用

    <!-- 默认浏览器是不支持模块的，需要指定type -->
    <script type="module">
        // 导入模块
        import {username, hello} from './m1.js';
        console.log(username);
        console.log(hello(username));
    </script>

别名使用场景，在有名字冲突或者想要隐藏真实命名的时候可以使用别名代替

m2.js

// 别名导出（1）声明（2）导出
// 声明
let username = '用户2';
function hello(username) {
    return `Hello, ${username}`;
}
// 别名导出
export {username as user, hello as getName};

test.html对导出的引用

    <!-- 默认浏览器是不支持模块的，需要指定type -->
    <script type="module">
        // 导入模块
        import {user, getName} from './m2.js';
        console.log(user);
        console.log(getName(user));
    </script>

2.命名空间

导入成员过多时可以挂在一个对象上，这个对象就叫命名空间。

命名空间使用

m3.js

// 默认成员（default表示）的导出，不是声明，导入时需要命名。
let username = '用户3';
function hello(username) {
    return `Hello, ${username}`;
}
let useremail = 'user@php.cn';
// 私有成员不导出
let sex = 'male';
// 将useremail作为默认导出
export {username, hello, useremail as default };

test.html对导出的引用

    <!-- 默认浏览器是不支持模块的，需要指定type -->
    <script type="module">
        // 导入模块
        import * as user from './m1.js';
        console.log(user);
    </script>

访问成员

<script type="module">
        ...
        // 访问成员
        console.log(user.username);
        console.log(user.hello(user.username));
        console.log(user.default);
    </script>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0810-变量引用、字符串函数

2022-08-29 13:47:39