前端调接口的学习

最新推荐文章于 2025-06-08 18:59:03 发布

x优培

最新推荐文章于 2025-06-08 18:59:03 发布

阅读量4.1k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_37077052/article/details/127110720

前端学习专栏收录该内容

6 篇文章

订阅专栏

本文分享了作者作为新手如何通过实际项目学会了如何从接口文档获取数据，并展示了调用接口、异常处理和团队协作的重要性。包括如何解读接口、正确使用axios、处理空值和优雅编写请求参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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