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

叁歲伎倆 2022-04-03 06:22 310阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

Axios 中文使用说明文档地址：[Axiox 中文说明文档][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=" 小熊点点它">
        
      </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 请求 参数组装：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

代码：

// 组装参数，不直接写在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 => {});

[Link 1]: https://www.captainai.net/jiangyu1013/
[Axiox]: https://www.kancloud.cn/yunye/axios/234845
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220403/45c739fbe4f8499eb691064b29b67a71.png