个人技术总结——在vue中使用axios

221900434-陈黎莉学生 2022-06-26 20:38:10

这个作业属于哪个课程	软件工程实践2022年春-F班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	对课程以及个人技术进行总结
其他参考文献	CSDN

一、技术概述
二、技术详述
1、使用步骤
(1) 在需要的文件中导入axios
(2)使用axios获取数据
2、使用场景
(1) get且不带参数
(2) get且带参数
(3) 请求头带上token且使用post方法获取数据
三、技术使用中遇到的问题和解决过程
四、总结
附：参考博客

一、技术概述

Axios是一个基于promise的HTTP库，主要的作用是用于向后台发起请求，可以在浏览器中发送XMLHttpRequests请求，在node.js中发送http请求，可以拦截请求和响应，也可以转换请求和响应数据。

二、技术详述

1、使用步骤

(1) 在需要的文件中导入axios

在这里插入图片描述

(2)使用axios获取数据

见第二部分

2、使用场景

(1) get且不带参数

在项目中，获取话题排名列表的接口使用的是get方式获得，无需参数，接口文档如图所示

在这里插入图片描述

在vue中使用axios通过get获取数据的方法如图所示，axios使用get方法并传入接口url即可获取数据，将返回的数据封装在res中，若返回码为200则为成功。

在这里插入图片描述

(2) get且带参数

在项目中，获取话题详情的接口使用的是get方式获得，需要带上话题id作为参数，接口文档如图所示

在这里插入图片描述

在vue中使用axios通过get带上参数并获取数据的方法如图所示，axios使用get方法并传入接口url以及json格式的参数，即可获取数据，将返回的数据封装在res中，若返回码为200则为成功。

在这里插入图片描述

(3) 请求头带上token且使用post方法获取数据

在项目中，获取关注人博客的接口使用的是post方式获得，并且需要带上用户本次登录的token以便验证，接口文档如图所示

在这里插入图片描述

在vue中使用axios通过post带上token并获取数据的方法如图所示，首先，在getToken()方法中获取用户的token，并使用axios.interceptors.request.user...方法将headers的token设置为用户的token，并在getBlogInfo()方法中将该要请求的接口url以及其他需要的数据用json封装好通过post方法获取参数，即可获取数据，将返回的数据封装在res中，若返回码为200则为成功。

在这里插入图片描述