前端调接口的学习

最新推荐文章于 2024-07-21 10:19:19 发布

x优培

最新推荐文章于 2024-07-21 10:19:19 发布

阅读量3.7k

点赞数 3

分类专栏：前端学习文章标签：学习前端

本文链接：https://blog.csdn.net/qq_37077052/article/details/127110720

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

0.前言

入职后领导分配的第一个任务是uni-app项目的三个页面的接口，从刚接手的蒙蔽（产品经理就发了切好后的图，而自己只跟着视频mock了数据）到还算顺利的调好接口，还是学到了很多。由于当时接手时，网上查了很多都不了解，如：我需要什么材料？我需要怎么调接口？我需要注意什么？故写下这篇文章，做个记录。

1. 什么叫调接口？

大白话讲，就是后端写好了页面所需要的数据。如：

{
    data: {
        FirstName: "Doreen",
        LastName: "Xu",
        DOB: "1990-01-01",
        Parents: [
            {Father: ""},
            {Mother: ""}]
    }
}

然后把这串数据生成一串url（具体过程不谈），这时前端通过此url，就可以获取到相应数据，然后将其渲染到页面相应位置，例如插值表达式{{data.DOB}}。听起来so easy？也许是，但是对于菜鸟而言（如我），需要注意的还挺多。

2. 如何调接口？

2.1 背景

给我任务时，静态页面已经是写好的，接口也已经写好，不要自己mock数据并等后端接口。

2.2 任务

成功获取接口数据并渲染到页面

2.3 步骤

（1）找跟你对接的后端或者产品经理或领导什么的要到接口文档！！！！！（我就是蒙蔽在这一步耗了一天时间）；

【我们的接口文档是在swagger上，以下步骤以swagger为例】

（2）确定每个页面所需要的接口。如当时一个页面有个列选择器，当时按照前人的代码，保存死数据没变，后来被领导批评，如果这个地方再加一个选项，那你这选择器不就选不到新选项了？然后才意识到，这个地方的选项也需要调用一个接口；

（3）理解通过接口得到的每个数据是什么意义，对应页面的什么位置；

这里，swagger入门级提示：当点击“Execute”后，点击Schema，是可以看到变量对应的中文名的（对一些不好好起变量名的设计接口人员而言，这个是个好工具!）

（4）书写代码，通过axios发请求并获取数据，注意接口地址、请求类型（POST/GET）、请求参数。对于请求参数的书写，如果是有多个参数，更优雅的写法是写成computed方法，然后在computed里面进行变量的书写；

图引用自：再见丑陋的 SwaggerUI，这款API文档生成神器界面更炫酷，逼格更高！_Knife_com_https

（5）确定数据是否成功获取，按我的笨比方法，是console.log(data),然后在工作台上看打印出的数据，看我领导检查我成果的方法，学习了F12->"network"的作用，还是方便多了。

拿知乎为例：

打开开发者调试工具后选择“Network”，就可以看到你的请求，“Name”栏底下是接口的名字，Status：200（获取数据成功），401（未授权的），403（没有权限访问数据），404（没找到运行页面）。（有一次我打开页面一值没数据，一看status：pending，在点waterfall一看有个时间特别长，后来查了才知道是浏览器的问题，用chrome访问7次就容易此时间过长，edge不会，不过后来重启后问题就没出现过了）。

然后点击任意一个请求，也可以看到请求地址，请求方式、回应头部信息等。

当然，如果向我们这样成功调用接口，用以上步骤可以在network里获得到所需数据的。

（6）渲染到页面，注意空值处理。

（7）最后的最后，我们的最终目标：只要是需要调用接口显示的数据，在视图层上只有变量名，不存在任何一个死数据！

4. 一些调接口中的注意点

（1）老师反复跟我强调的一点：对于每一个获取到的数据，都要思考，如果网络不好或后端漏写导致数据为空/undefined/null时，需要怎么进行异常处理（只有单层的还好，关键是对象中包裹数组的那种），并且需要从用户的角度思考，不要程序员的角度，如：

try {
    //doSomeThing
} catch(e) {
    console.log(e);
}

用户并不会打开控制台看错误的信息，他们更需要的是弹窗（confirm）/提示框（alert）等告诉他们这里有问题，不用继续等了，所以在联调时，也需要考虑用户体验感；

（2）虽然是给你分配的是联调接口，但对页面中的每个功能、每个数据有不清楚的，都需要问个明白，不然最后锅就甩给你了。数据不清楚问提供接口的后端（如：原型上明明“汇总”，而且这种一般在第一项，我后端给成了”合计“，且这个词在数组中出现位置随机，不问清楚谁知道啊= =）；功能不确定问切图的前端；显示数据不明确问产品