简单的直接用axios调用接口的方法（详细）

最新推荐文章于 2024-08-17 14:27:18 发布

+一步之遥+

最新推荐文章于 2024-08-17 14:27:18 发布

阅读量6.2k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45596887/article/details/126442813

版权

本文简要介绍了如何在JavaScript前端项目中直接使用axios库调用API接口。首先，文章提到在script部分引入axios库，然后在methods中定义调用接口的函数，最后在mounted生命周期钩子中调用该函数完成接口的调用。

摘要由CSDN通过智能技术生成

话不多说，上干货。

1、直接axios调用

首先在script中引入axios，直接写在export default外面，script标签里面

import axios from "axios";

2、在 methods中定义函数

gt() {
      var url =
        "http://10.30.118.38:6003/api/cicd-service/cicd/jenkinsproject/queryListByGroupType";
      var params = {
          //输入默认值的话是为了测试接口
        pageNum: 1,
        busiType: "12",

   //  xxx：this.xxxx  等号左侧输入是后端对应的要传过来的数据名称
   //等号右侧假如输入this.xxxx是为了让后端的数据动态匹配上前端所使用的的名称
   //例如：pageSize: this.pageSize  的冒号左侧是后端参数名称  ，右侧是前端的表格显示的名称
      };
      axios({
        //请求使用的方法，可写get或者post等
        method: "get",
        //url写的是请求地址
        url: url,
//params写的是数据请求条件 ，即后端给定的请求参数中，是否必须  是true的选项必须写在params内
        params: params,
        //以下都是固定写法
      }).then((res) => {
          //接口请求成功的一个标志，200是状态码，双