axios模拟表单POST请求实例及详解

<template>
  <div>
    {{title}} <br></br>
    <a href="javascript:" v-on:click="post()">POST按钮</a>
    {{msg}}
  </div>
</template>

<script>
    import axios from 'axios'
    // 1、使用qs将axios发送的数据格式转换为form-data格式（在安装axios时，默认就安装了）
    import qs from 'qs'
    import {addMessage} from './api.js'
    export default {
        name: "Test",

        data () {
          return {
            title: '我是Test组件！！！',
            msg:'',
            param: {
              roomid: '1'
            }
          }
        },

        methods: {
         
          post: function() {
            axios.post(
                "http://192.166.0.132:9999/txapi/storage/",
                // 2、将请求数据转换为form-data格式
                qs.stringify({ roomid: '1', content: '二狗' }),
                // 3、设置请求头Content-Type
                { headers:{ 'Content-Type':'application/x-www-form-urlencoded' }},
            ).then(res => {
              this.msg = res.data
            })
            .catch((error) => {
              this.msg = error
            })
          },

        }

    }

</script>

<style scoped>

</style>