欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中axios的post請(qǐng)求,415錯(cuò)誤的問題

 更新時(shí)間：2023年04月22日 08:37:15   作者：想喝橙汁兒  
這篇文章主要介紹了vue中axios的post請(qǐng)求,415錯(cuò)誤的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue axios的post請(qǐng)求415錯(cuò)誤

415錯(cuò)誤

415是HTTP協(xié)議的狀態(tài)碼415的含義是不支持的媒體類型(Unsupported media type)檢查是否在POST請(qǐng)求中加入了headerheader中是否包含了正確的Content-Type

需求分析

需求：請(qǐng)求本地平臺(tái)上數(shù)據(jù)庫(kù)的表單數(shù)據(jù)

問題：請(qǐng)求415錯(cuò)誤

原因：請(qǐng)求格式頭問題

我想請(qǐng)求的是表單數(shù)據(jù)，但是一直默認(rèn)是請(qǐng)求json數(shù)據(jù)，因?yàn)闆]有后端的原因，需要前端解決。

方法：

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);
         })

其中發(fā)揮關(guān)鍵作用的是headers與transformRequest。其中 headers 是設(shè)置即將被發(fā)送的自定義請(qǐng)求頭。

transformRequest 允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)。

這樣操作之后，后臺(tái)querystring.parse(decodeURIComponent(data))獲取到的就是類似于{ name: ‘w’, password: ‘w’ }的對(duì)象。

另外一種辦法就是后端去改，本文就不作具體解釋了。。。

vue-axios的get、post請(qǐng)求

  • 直接在控制臺(tái)上打印axios會(huì)報(bào)錯(cuò)，打印fetch就不會(huì)； 
  • 因?yàn)閒etch是標(biāo)準(zhǔn)，axios是第三方，要想用axios，就必須引入想應(yīng)的js文件；
  • axios-js文件下載：npm 
  • 搜索axios，點(diǎn)進(jìn)去，往下找：

  • 打開鏈接：“https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js”，ctrl+s保存源碼，就下載好了；
  • 然后引入到html中就可以使用了。

get方式：axios請(qǐng)求數(shù)據(jù)核心代碼

axios.get("./test.json").then(res => {
          console.log(res)
          //數(shù)據(jù)在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)
                        //數(shù)據(jù)在res.data.data.films里
                        console.log(res.data.data.films)
 
                    })
                }
            }
        })
    </script>
</body>
</html>

結(jié)果：

post方式：不用寫headers

攜帶的信息放在第二個(gè)參數(shù)位置上就可以了，不用寫其他的；

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

axios請(qǐng)求數(shù)據(jù)的方式比f(wàn)etch方式更簡(jiǎn)單，直接一個(gè)then就可以；

而且post方式還不用寫headers，直接寫數(shù)據(jù)，會(huì)自動(dòng)查看你攜帶的數(shù)據(jù)是什么類型；

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論