vue的异步请求|青训营笔记

76 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的第四天,此刻想记录自己在做项目中需要与后端进行交互用到的异步请求。
vue中前端请求接口的方法有好几种,而我经常用到的是axios请求,下边就来简单写写一些自己用到的东西吧~

vscode中先安装axios

在终端安装,使用命令:npm i axios
在需要使用的页面或者在main.js中导入axios
import axios from 'axios'

axios请求中的方式有哪些

  • get:一般用来获取后台传过来的数据
  • post:一般用来从前台提交一些数据给后台和上传一些文件
  • put:一般用来对数据全部进行更新
  • patch: 一般只对更改过的数据进行更新
  • delete:用于删除请求
    个人建议将请求封装成函数,使用起来会比较方便,同时,代码不会很乱,看起来比较舒服整洁 以下是从封装了的角度来讲

带上拦截的请求

Snipaste_2022-08-21_23-53-31.png

get方式

Snipaste_2022-08-21_23-53-31.png

在页面中使用的时候:

Snipaste_2022-08-21_23-53-31.png

postputpatchdelete请求方式的写法都上面的差不多,这里就不具体写出来了
请求成功后,将需要完成的步骤写在if条件内。

async/await

由于axios是异步请求,所以有时候页面的一些需要,会使请求不能跟上变量的变化需要,这时候async/await起作用了,在需要同步的那个位置前面写await,表示执行完这一步之后再去执行代码下面的内容,await只有在async存在的时候才起作用,例如:

Snipaste_2022-08-21_23-53-31.png

总结

axios请求比较普遍使用,个人也比较习惯用它,如果想要了解的伙伴可以在官网上具体看看内容。