«

vue中axios的post请求,415错误问题怎么解决

时间:2024-5-24 15:38     作者:韩俊     分类: Javascript


本篇内容主要讲解“vue中axios的post请求,415错误问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中axios的post请求,415错误问题怎么解决”吧!

    vue axios的post请求415错误

    415错误

    415是HTTP协议的状态码415的含义是不支持的媒体类型(Unsupported media type)检查是否在POST请求中加入了headerheader中是否包含了正确的Content-Type

    需求分析

    需求:请求本地平台上数据库的表单数据

    问题:请求415错误

    原因:请求格式头问题

    我想请求的是表单数据,但是一直默认是请求json数据,因为没有后端的原因,需要前端解决。

    方法:

    axios({
               method: 'post',
               url: 'http://localhost:8080/jsaas_war/restApi/sys/queryForJson?alias=three&params',
               data: JSON.stringify(),
               headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
               },
               //下面这段代码
               transformRequest: [function (data) {
                 let ret = ''
                 for (let it in data) {
                   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                 }
                 return ret
               }],
               
               
             }).then(res=>{
                 console.log(res);
             }).catch(err=>{
                 console.log(err);
             })

    其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。

    transformRequest 允许在向服务器发送前,修改请求数据。

    这样操作之后,后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: ‘w’, password: ‘w’ }的对象。

    vue-axios的get、post请求

      直接在控制台上打印axios会报错,打印fetch就不会; 

      因为fetch是标准,axios是第三方,要想用axios,就必须引入想应的js文件;

      axios-js文件下载:npm 

      搜索axios,点进去,往下找:

      打开链接:“https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js”,ctrl+s保存源码,就下载好了;

      然后引入到html中就可以使用了。

    get方式:axios请求数据核心代码

    axios.get("./test.json").then(res => {
              console.log(res)
              //数据在res.data.data.films里
              console.log(res.data.data.films)
         })

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../lib/vue.js"></script>
        <script src="axios.min.js"></script>
    </head>
    <body>
        <div id="box">
            <button @click="handleClick">axios</button>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    
                },
                methods:{
                    handleClick(){
                        axios.get("./test.json").then(res => {
                            console.log(res)
                            //数据在res.data.data.films里
                            console.log(res.data.data.films)
     
                        })
                    }
                }
            })
        </script>
    </body>
    </html>

    结果:

    post方式:不用写headers

    携带的信息放在第二个参数位置上就可以了,不用写其他的;

                handleClick(){
                        axios.post("./test.json","name=yiyi&age=100").then(res => {
                            console.log(res)
                            //数据在res.data.data.films里
                            console.log(res.data.data.films)
     
                        })
                    }
    axios.post("./test.json",{name:"yiyi",age:100})

    axios请求数据的方式比fetch方式更简单,直接一个then就可以;

    而且post方式还不用写headers,直接写数据,会自动查看你携带的数据是什么类型。

    标签: javascript vue

    热门推荐