新手小白VUE整理(3) —— 前端模块化,Promise,axios

crazy程序猿丶

已于 2022-10-31 08:54:42 修改

阅读量354

点赞数

分类专栏：新手小白初识vue 文章标签： vue.js 前端 javascript

于 2022-10-30 20:19:11 首次发布

本文链接：https://blog.csdn.net/a35336000/article/details/127603044

版权

新手小白初识vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

VUE 2.X

1.前端模块化

在ES6模块化规范诞生之前,JavaScript社区已经尝试并提出了AMD,CMD,CommonJS等模块化规范,
但是,这些由社区提出的模块化标准,还是存在一定的差异性和局限性,并不是浏览器与服务器通用的模块化
标准,例如:
AMD和CMD适用于浏览器端的JavaScript模块化
CommonJS适用于服务器端的JavaScript模块化
太多的模块化规范给开发者增加学习难度与开发的成本.因此,大一统的ES6模块化出现了

2.什么是ES6模块化规范?

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学
习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6模块化规范中定义:
每个JS文件都是一个独立的模块
导入其他模块成员使用import关键字
向外共享模块成员使用export关键字

3. 在 node.js 中体验 ES6 模块化

node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照
如下两个步骤进行配置：
① 确保安装了 v14.15.1 或更高版本的 node.js
② 在 package.json 的根节点中添加 “type”: “module” 节点

4.默认导出基础语法

export default 默认导出的成员,示例:

let n1 = 10
let n2 = 20

function show(){}

export default {
  n1,n2,show
}

5.默认导入基本语法

import 接收名词 from ‘模块名’,示例:

import m1 from './1.默认导出.js'

console.log(m1)

6.ES6模块化注意事项

每个模块中,默认导出,只允许使用唯一的一次 export default,多次使用会报错
默认导入时,接收名词可以是任意名词,只要是合法名词就行,不能以数字开头

7.按需导出

export let s1 = 'aaa'
export let s2 = 'bbb'
export function say(){}

8.按需导入

import {s1,s2,say} from '模块标识符'

9.按需导出和按需导入注意事项

每个模块中可以使用多次按需导出
按需导入的成员名词必须和按需导出的名称保持一致
按需导入时,可以使用as关键字进行重命名
按需导入可以合默认导入一起使用

10.Promise

1)Promise的基本介绍

Promise是一个构造函数
我们可以创建Promise的实例,const p = new Promise()
new 出来的Promise实例对象,代表一个异步操作
Promise.prototype上包含一个.then()方法
每一次new Promise()构造函数得到的实例对象都可以通过原型链的方式
访问到.then()方法,例如p.then()
.then()方法可以预先指定成功和失败的回调函数
p.then(成功的回调函数,失败的回调函数)
p.then(result ==>{},error ==>{})
调用.then()方法时,成功的回调函数是必选的,失败的回调函数是可选的

2).then()方法的特性

如果上一个.then()方法返回了一个新的Promise实例对象,则可以通过下一个.then()方法继续进行处理.
通过.then方法的链式调用,就可以解决回调地狱的问题,示例代码:

注:axios的基本导入<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   axios官网:https://www.axios-http.cn/docs/intro
const url = 'springboot-demo/test/testPage?num=';
const instance = axios.create({
  baseURL: 'http://localhost:8081/',
  timeout: 1000
});

instance.get(url+"1").then(function(result){
  console.log(result)
  // 如果return的结果是Promise实例对象,则会执行ajax请求,并在后续的.then()方法,执行成功或失败回调
  // 如果是其他类型,比如number,String等,则在成功回调中,直接返回当前结果,没有任何返回值则是undefined
  return instance.get(url +"2");
},function(error){
  console.log(error)
}).then(function(result){
  console.log(result)
  return instance.get(url+"3")
}).then(function(result){
  console.log(result)
}).catch(function(error){
  console.log(error)
})

3)关于Promise中的错误捕获

在Promise的链式操作中如果发生了错误,可以使用Promise.prototype.catch方法进行捕获和处理,如上代码所示.
如果不希望前面的错误导致后续的.then无法执行,则可以将.catch的调用提前,示例代码:

instance.get(url+"1").then(function(result){
  console.log(result)
  // 如果return的结果是Promise实例对象,则会执行ajax请求,并在后续的.then()方法,执行成功或失败回调
  // 如果是其他类型,比如number,String等,则在成功回调中,直接返回当前结果,没有任何返回值则是undefined
  return instance.get(url +"2");
}).catch(function(error){
  console.log('提前进行错误捕获')
  console.log(error)
}).then(function(result){
  console.log('尽管出现错误,但我还是执行了')
  console.log(result)
  return instance.get(url+"3")
}).then(function(result){
  console.log(result)
})

4)Promise.all()方法

Promise.all()方法会发起并行的Promise异步操作,等所有的异步操作全部结束后,才会执行下一步的.then()操作,任何一个请求出错,都将进行catch或error代码块,另外,如果error或者catch代码块同时存在,如果发生错误,则只执行error块中的代码
示例代码:

const url = 'springboot-demo/test/testPage?num=';
  const instance = axios.create({
    baseURL: 'http://localhost:8080/',
    timeout: 1000
  });
  const promiseArr = [
    instance.get(url+"1"),
    instance.get(url+"2"),
    instance.get(url+"3"),
  ]

Promise.all(promiseArr)
      .then(function(arr){
        console.log(arr)
      },function(error){
        console.log('-----error-----')
        console.log(error)
      }).catch(function(error){
        console.log('-----catch-----')
        console.log(error)
      })

5) Promise.race()

Promise.race()方法会发起并行的Promise异步特性,只要任何一个异步操作完成,就立即执行下一步的.then()操作。
示例代码：

const url = 'springboot-demo/test/testPage?num=';
const instance = axios.create({
  baseURL: 'http://localhost:8080/',
  timeout: 1000
});
const promiseArr = [
  instance.get(url+"1"),
  instance.get(url+"2"),
  instance.get(url+"3"),
]

Promise.race(promiseArr)
      .then(function(result){
        // 这里只会返回多个结果中执行最快的那个结果
        console.log(result)
      },function(error){
        console.log('-----error-----')
        console.log(error)
      }).catch(function(error){
        console.log('-----catch-----')
        console.log(error)
      })

6)自己封装Promise实例方法

方法的封装要求：

方法的名称要定义为getResult
方法接收一个形参url,表示要执行的ajax请求
方法的返回值是Promise
示例代码:

function getResult(url){
  return new Promise(function(resolve,reject){
      axios.get(url).then(function(result){
        console.log('执行resolve方法')
        resolve(result)
      },function(error){
        console.log('执行reject方法')
        reject(error)
      })
  });
}
const url = 'http://localhost:8081/springboot-demo/test/testPage?num=1';
getResult(url)
  .then(function(result){
    console.log('调用成功了!!')
    console.log(result)
  },function(error){
    console.log('调用失败了!!')
    console.log(error)
  });

7)关于async/await

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在 async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。示例代码:

const instance = axios.create({
  baseURL: 'http://localhost:8080/',
  timeout: 1000
});
const url = 'springboot-demo/test/testPage?num=';

async function getResult(){
  // 解构赋值
  const {data:r1} = await instance.get(url + '1')
  console.log(r1)
  // 正常取值
  const r2 = await instance.get(url + '1')
  console.log(r2)
  const r3 = await instance.get(url + '1')
  console.log(r3)
}
getResult();

8)async/await 的使用注意事项

如果在function中使用了await,则funciton必须被async修饰
使用await关键字,调用接口得到的结果等同于.then()方法中的得到的result
使用了await关键字以后,会阻塞了当前方法的执行,await异步方法执行完成之前,当前方法的后续代码不会执行

11.eventLoop

1)JavaScript语言特点

JavaScript是一门单线程执行的编程语言.也就是说,同一时间只能做一件事情
单线程执行任务队列的问题:
如果前一个任务非常耗时,则后续的任务就不得不一直等待,从而导致程序假死的问题.

2)同步任务和异步任务

为了防止某个耗时的任务导致程序假死的问题,JavaScript把待执行的任务分为:

同步任务
又叫做非耗时任务,指的是在主线程上排队执行的那些任务,只有前一个任务执行完毕,才能执行后一个任务.
异步任务
1.又叫做耗时任务,异步任务由JavaScript委托给宿主环境进行执行
2.当异步任务执行完成后,会通知JavaScript主线程执行异步任务的回调函数
3.宿主环境:主要指js代码执行的环境,比如在js代码在浏览器执行,那么此时宿主环境就是浏览器,如果js代码在node服务器执行,那么此时宿主环境就是node服务器

3.同步任务和异步任务执行过程

在这里插入图片描述

同步任务由JavaScript主线程执行
异步任务委托给宿主环境执行
已完成的异步任务对应的回调函数会被加入任务队列中等待执行
JavaScript主线程的执行栈被清空后,会读取任务队列中的回调函数,次序执行
JavaScript主线程会不断重复上面的第四步

4)eventLoop基本概念

JavaScript主线程从"任务队列"中读取异步任务的回调函数,放到执行栈中依次执行,
这个过程是不断循环的,所以整个这种运行机制又称为EventLoop.

12.宏任务和微任务

JavaScript把异步任务又做了进一步的划分,异步任务又分为两类,分别是:

1)宏任务

异步Ajax请求
setTimeout,setInterval
文件操作
其他宏任务

2)微任务

Promise.then,.catch和.finally
process.nextTick
其他微任务

3)图解js任务划分

在这里插入图片描述

4)宏任务和微任务执行顺序

先执行宏任务,宏任务执行完以后,判断是否有微任务,有则执行完所有微任务,微任务执行完以后,再看是否还存在宏任务,以此循环执行.
在这里插入图片描述

5)宏任务微任务习题分析

在这里插入图片描述
正确顺序:2431
分析:

先执行所有同步代码块,第6行和第12行
再执行微任务第9行
再执行宏任务第2行

13.axios用法

1)axios的基本语法:

axios({
  method:'请求的类型',
  url:'请求的URL地址',
  // url中的查询参数
  params:{},
  // 请求体参数
  data:{}
}).then(function(result){
  // .then用来指定请求成功之后的回调函数
  // 形参中的result(套了一层壳)是请求成功之后的结果
})
注:axios在请求到数据之后,会在真正的数据之外,再套一层壳,比如:
服务器返回的数据:
{
  status:'',
  data:{},
  message:''
}
而根据axios得到的数据:
{
  config:{},
  data:{服务器返回的数据},
  headers:{},
  request:{},
  status:xxx,
  statusText:''
}
更详细配置见官网:https://www.axios-http.cn/docs/req_config

2)axios直接发get和post请求

1.get请求
axios.get(url,{
  // get参数
  params:{}
})
2.post请求
axios.post(url,{post请求参数})
示例代码:
async function testAxiosPost(){
    const result = await axios.post('http://localhost:8080/springboot-demo/test/testParam',{username:'zs'})
    console.log(result)
 }

 testAxiosPost();