课程名称：前端工程师
课程章节： 第三章 项目登录&注册页开发
主讲老师：Dell

课程内容： 第三章 登录&注册页开发

3-5 请求函数的封装

1.涉及的写法

封装请求函数 在 src 目录下, 新建 utils目录, 再建 request.js 文件

最后发 post 请求 通过 async, await 异步请求

2. axios ：

• 1） axios
  promise 和 axios有什么关系?
  axios是基于promise的一个库，封装的ajax 所以本节课封装请求的时候要return一个promise对象
  “axios是基于promise的一个http库，axios返回的就是一个Pro omise对象Promise是最早提出的解决异步操作的一种解决方案，Promise对象是一个构造函数用来生成promise实例，es6统一了它的用法。”

• 2）axios使用post的方法：
  封装后的方法：
  

• 3）promise.then 成功的情况下 等于 async。 可以不用写then promise.catch异常
  对应try…catch

• 4）异步函数
  同步函数是指,当然执行那个函数时,一定要等它执行完才可以执行下一条函数(或指令),未执行完的话就一直等待下去。
  异步函数是指执行那个函数时,不会等待它执行完成就可以执行其他的函数。

• 5）async & await：

• 6）try catch finally 相关知识点：
  （1）、try catch 可以用来处理代码的异常。
  比如下面的代码，正常情况下，不会打印111，因此变量num没有定义直接使用了，代码会报错：
  此时我们可以使用try catch处理一下，让代码即使有错误，也能正常往下执行，不会中断：
  上图代码的执行过程如下：
  先尝试执行try中的代码（console.log(num)），如果代码没错误，则正常执行try中代码，否则会执行catch中代码；最后代码会继续往下执行console.log(“我还会执行”)：
  即console.log(“我还会执行”)这句代码，不会受上面代码影响，即使上面代码有问题，代码也能正常往下执行它（图A），而不会因为错误而中断：
  （2）、try catch finally和try catch 一样，只是多了一个finally。不管代码是否有错，finally中的代码都会执行，所以图A中的代码可以改写成如下：
  try catch finally并不常用，重点学会try catch 即可。

• 7）构造函数new：

• 8）promise的then方法：

3.本次用到的语法：

• 1）async() await 语法问题
  async和await是es6中的知识，基于promise实现的。在前面promise课程中是有扩展的。
  post请求是异步的，但是await会等待请求执行完后才会执行下面的。
• 2）results?.data?.errno
  ?. 意思是尝试访问对象的属性之前检查对象是否存在，防止在对象不存在时访问属性导致代码报错。可以结合如下解析理解：
  （a）先了解下?.语法，例如：obj ?. age 可以简单的理解为它的作用与三目运算符类似，即： obj？obj.age : undefined，如果obj对象存在，那么就返回obj的age属性值，否则返回undefined。
  （b）分析截图中的代码，result?.errno === 0这句代码的意思就是先判断result对象是否存在，如果存在的话，再判断result下的errno属性值是否等于0。
  如果result对象不存在，代码并不会报错，而是返回undefined，与0比较时不相等，不符合if条件，不执行if下的语句就可以了。
• 3）result中的属性data中有errno。
• 4）使用async await的原因，是await可以先执行
• 5） Try catch相关知识点复习，err是一个内置对象，表示捕获的错误
• 6） 对axios进行封装，接口修改会很麻烦 注意axios是前面npm安装的
• 7）优化

1）只需要data中的errno的数据

2）获取response.data即可
consolo.log(result); 拿到的就是data 的内容

3）简写成：result?.errno === 0