学习记录(day03-模块化、axios)

最新推荐文章于 2024-10-03 09:02:12 发布

庭前云落

最新推荐文章于 2024-10-03 09:02:12 发布

阅读量120

点赞数

分类专栏：学习记录文章标签： python java vue javascript js

本文链接：https://blog.csdn.net/remsqks/article/details/108585817

版权

学习记录专栏收录该内容

37 篇文章 3 订阅

订阅专栏

day03-模块化、axios

在ES6之前，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
社区提供了一些解决方案，最主要两种：CommonJS和AMD
CommonJS ，<u>静态优化，用于服务器</u>。
模块参考：https://blog.csdn.net/arsaycode/article/details/78959780
AMD两种，<u>运行时加载，用于浏览器。</u>
AMD参考：https://efe.baidu.com/blog/dissecting-amd-what/

1.1.1ES5 CommonJS解决方案

CommonJS一个服务器端的解决方案
CommonJS 需要一个兼容的脚本加载器，来支持require 和 module.exports 函数，用于模块导入导出。
Node.js支持此种思想
模块导出

es5 commonjs 导出

module.exports=(参数)=>方法;

es5 commonjs 导入

const 变量 = require('资源')

1.1.2 ES6 module 隐式要求

ES6的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

严格模式主要有以下限制。

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

1.1.3 ES6module

一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。

ES6 模块主要由两个命令构成：export和import。
export命令：规定模块的对外接口。一条export语句声明一次，一个文件中可有多条。
import命令：导入其他模块。

export 对外声明成员

// 写法一：声明一个成员
export var m = 1;
 
//写法二：批量声明成员
var m = 1;
export {m};
 
// 写法三：声明成员时起别名
var n = 1;
export {n as m};

import 导入模块

import {成员,...} from '资源';

import 默认 from '资源';

Node.js演示【注意：扩展名为mjs】

编写demo01_1.mjs文件(导出)
编写demo01_2.mjs文件(导入)
使用node运行

node --experimental-modules .\demo01_2.mjs

如果使用的不是mjs文件，如果执行时没有添加参数 --experimental-modules，会出现如下异常：

1.1.4 默认导出 export default

使用import命令加载模块，必须知道模块中的的变量名或函数名，否则无法加载。
为了方便使用模块，模块允许使用export default 定义默认输出。一个模块只允许一个默认输出。
默认导出变量

默认导出函数

默认和其他导出内容结合使用

导出

export default 默认导出内容;
export {其他成员列表};

导入

import 默认,{其他成员列表} from 模块;

1.2.1概述

axios是什么？
- axios是基于promise（诺言）用于浏览器和node.js是http客户端
axios的作用是什么？
- axios主要是用于向后台发起请求的
参考网站：http://www.axios-js.com/

1.2.2安装

npm install axios

1.2.2发送请求

导入axios模块，并设置基本项

//1. 导入axios模块

const axios = require('axios')

 

//2. 设置基本项
//2.1 确定后端服务器基本地址
axios.defaults.baseURL = 'http://localhost:8080';



3. 发送get请求
axios.get('/test')
.then(function (response) {
    console.info('get请求成功')
    //console.info(response)
})
.catch(function (error) {
    console.info('get请求失败')
    //console.info(error)
})



//4 发送post请求
//4.1 准备请求数据
let user = {
    username:'jack',
    password:'1234'
}
//4.2 发送post请求
axios.post('/test', user)
.then(function (response) {
    //1) 响应状态码
    console.info(response.status)
    //2) 响应数据
    console.info(response.data)
})
.catch(function (error) {
    console.info('post请求失败')
})



//5 发送put请求
axios.put('/test/100', user)
.then(function (response) {
    console.info(response.status)
})
.catch(function (error) {
    console.info('put请求失败')
    console.info(error)
})


//6 发送delete请求
axios.delete('/test/100')
.then(function (response) {
    console.info(response.data)
})
.catch(function (error) {
    console.info('delete请求失败')
})

日常学习的总结，主要是为了自己以后看，当然大家有什么好的建议，欢迎评论留言。