xhr与fetch异步编程的步骤,xhr与fetch异步编程的步骤 - 第20期培训-大前端

Home > List of blog posts > xhr与fetch异步编程的步骤,xhr与fetch异步编程的步骤

Blogger Information

Blog 37

fans 0

comment 0

visits 14211

Special Recommendation

More>

Related recommendations

1. xhr与fetch异步编程的步骤,实例演示

<!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>ajax和fetch请求</title>
  </head>
  <body>
    <button onclick="fun()">ajax-GET获取数据</button>
    <button onclick="fun1()">fetch获取数据</button>
    <script>
      function fun() {
        //ajax请求数据
        const url = "http://jsonplaceholder.typicode.com/users";
        //实例化
        const xhr = new XMLHttpRequest();
        //响应类型
        xhr.response = "json";
        xhr.open("GET", url);
        //请求回调
        xhr.onload = () => console.log(xhr.response);
        xhr.onerror = () => console.log("Error");
        //发起请求
        xhr.send();
      }
      //fetc请求
      function fun1() {
        const url = "http://jsonplaceholder.typicode.com/users";
        fetch(url)
          .then((response) => response.json())
          .then((json) => console.log(json));
      }
    </script>
    <!-- 默认script在浏览器环境下不支持模块，需要指定type -->
    <script type="module">
      // 导入单个模块
      import { username, getUserName } from "./modules.js";
      console.log(username, getUserName(username));
      //导入统一模块
      import { age, getAge } from "./modules.js";
      console.log(age, getAge(age));
      //别名导入
      import { addr } from "./modules.js";
      console.log(addr);
      //默认导入
      import User from "./modules.js";
      const user = new User("nnd");
      console.log(user.username);
      console.log(user.getUsername(user.username));
    </script>
    <script>
      // 接收混合导入成员,默认成员的命名,必须放在非默认的前面
      // 默认导出成员,在导入时可以随意命名的,useremail只是巧合
      import email, { username, hello } from "./modules.js";
      console.log(email);
      console.log(hello(username));
    </script>
  </body>
</html>

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

//1.逐个导出
export let username = "Tim";
export function getUserName() {
  return username;
}
//统一导出
let age = 18;
function getAge() {
  return `${age}`;
}
export { age, getAge };
// 别名导出;
let address = "北京市";
export { address as addr };
//默认导出，导出的是一个声明
//只是导出一个值，不是声明，没有被 命名，由导入时重命名
//一个模块，只能有一个默认导出
export default class {
  constructor(username) {
    this.username = username;
  }
  getUsername() {
    return `hello  ${this.username}`;
  }
}
let username = "龙";
function hello(username) {
  return `hello${username}`;
}
let useremail = "dddkj@djked";
export { username, hello, useremail as default };

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

Markdown语法和emmet语法

2022-07-02 10:20:44

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

1. xhr与fetch异步编程的步骤,实例演示

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