Home > List of blog posts > 0801-xhr和fetch异步编程、模块的导入导出、命名空间

Blogger Information

Blog 35

fans 0

comment 0

visits 17005

Special Recommendation

More>

Related recommendations

一、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>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

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

2022-08-29 13:47:39