VUE - get 、post 请求后端接口：get 、post 写法（Axios 中文说明文档地址）

微风-- 轻许--

发布于 2022-04-13 16:17:14

1.8K0

发布于 2022-04-13 16:17:14

文章被收录于专栏：java 微风java 微风

Axios 中文使用说明文档地址：Axiox 中文说明文档

我只是记录下写法，两种请求都能正常运行：

1. 安装：

npm install axios

2.在 main.js 中加上以下配置：

// 用于和后台交互，发送请求
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;

<template>
  <div id="box">
    <input type="button" @click="getdata()" value=" 小熊点点它">
    <!-- <h1>site : {{data}}</h1> -->
  </div>
</template>

<script type="text/javascript">
  var data = "";

  export default {
    data() {
      return {
        data
      };
    },
    methods: {     
      getdata() {
         // get请求
        this.$axios.get("这里写请求的url").then(res => {
          alert("请求成功，response=" + res.data);
          // data = res.data;
          console.log(res.data.navList);
        });
      }        
    }
  };
</script>

3. post 请求参数组装：

代码：

  // 组装参数，不直接写在data后面
      var params = new URLSearchParams();
      params.append("account", "admin");
      params.append("nickname", "小熊");
      this.$axios({
        method: "post",
        url: this.GLOBAL.BASE_URL + "/user/getUser",
        data: params
      }).then(res => {});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/12/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

axios