美文网首页
vue 使用this.axios.post(`url`, dat

vue 使用this.axios.post(`url`, dat

作者: 思议岁月 | 来源:发表于2018-12-06 16:29 被阅读0次

    解决方式一

    而在axios中的post请求要非常注意:

    要设置合适的请求头,一般采用x-www-form-urlencoded即可

    Vue.prototype.axios = axios.create({

      headers: {'content-type': 'application/x-www-form-urlencoded'}

    });

    在我们npm安装跑axios 时默认就已经设置过请求头,我们无需更改。

    <script>

      export default {

        data() {

          return {

            article: [],

          }

        },

        methods: {

          onSubmit() {

          console.log(this.article);

    this.axios.post(`http://myblog.test/Home/Index/edit`, this.article)

          .then((res) => {

              this.$router.push({name: 'Home'})

          })

          }

        }

      }

    </script>

      var qs = require('qs')

    //import qs from 'qs'

      export default {

        data() {

          return {

            article: [],

          }

        },

        methods: {

          onSubmit() {

          console.log(this.article);

    this.axios.post(`http://myblog.test/Home/Index/edit`, qs.stringify(this.article))

          .then((res) => {

              this.$router.push({name: 'Home'})

          })

          }

        }

      }

    解决方式二、

    这样的话我们就必须在每一个页面上手动var qs = require('qs') 比较麻烦

    有没有解决办法能,当然有的。我们可以全局配置

    首先全局引入qs

    然后我们在填写post请求时,将所有的

    this.axios.post(`http://myblog.test/Home/Index/edit`, qs.stringify(this.article))

    修改可以正常使用,并且所有的post必须去掉 qs.stringify(this.article))

    this.axios.post(`http://myblog.test/Home/Index/edit`, this.article)

    解决方式三:

    在main.js中添加

    import qs from 'qs' //引入

    Vue.prototype.qs = qs  //全局加载,必须应用

    this.axios.post(`http://myblog.test/Home/Index/edit`, this.qs.stringify(this.article))

    页面直接只用this.qs.stringify调用

    希望此篇文章对你有所帮助

    相关文章

      网友评论

          本文标题:vue 使用this.axios.post(`url`, dat

          本文链接:https://www.haomeiwen.com/subject/modocqtx.html