个人技术总结——在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...方法将headerstoken设置为用户的token,并在getBlogInfo()方法中将该要请求的接口url以及其他需要的数据用json封装好通过post方法获取参数,即可获取数据,将返回的数据封装在res中,若返回码为200则为成功。

在这里插入图片描述

三、技术使用中遇到的问题和解决过程

遇到的问题: 学完基础知识以后,使用过程非常顺利,到现在为止没碰到什么问题,如果硬要说的话,就是在第二部分的第三种方法中的headers那边有个Content-Type没有改,获取数据失败
解决过程: 百度一下立马就有,解决过程很顺利

参考链接:Content-Type 详解

在这里插入图片描述

四、总结

作为一个前端人员,与后端进行数据交互是基本功,而掌握axios这种作为目前较为流行的方法非常重要,而且比起ajax,axios非常好用。

附:参考博客

如何在Vue中使用Axios
VUE的axios的详细介绍和用法

...全文
41 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
发帖
软件工程实践2022年春-F班

103

社区成员

福州大学-计算机与大数据学院-傅明建
软件工程 高校
社区管理员
  • Mingjian_Fu
  • Lyu-
  • Wake_lie
加入社区
帖子事件
创建了帖子
2022-06-26 20:38
社区公告

本次作业截止时间为2022-02-18 23:59:59,请未完成的同学抓紧时间,加入社区后的同学要按照“学号-姓名”的格式修改社区昵称。