資料互動 axios

來源:互聯網
上載者:User

標籤:配置   gif   port   cat   模組   全域   from   http   get   

在vue中,我們不可能為了網路請求而特意引入jQuery,之前vue裡有vue-resource來解決網路請求問題,後來官方建議使用axios,而vue-resource則不再維護。

axios的詳細教程見github地址:
https://github.com/axios/axios

 

安裝:
  npm install axios
  或
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

使用:

  一、設定檔式:

axios(config).then(res=>{to-do}).catch(err=>{to-do})

  以get和post請求說明

        //get:            axios({                method:‘GET‘,                url:‘http://www.zhouxiaohouer.com/api/getsth‘,                params:{                    name:‘黃燜雞米飯‘,                    price:34                }            }).then(res=>{                console.log(res.data)            }).catch(err=>{                console.log(err)            })        //post:            axios({                method:‘POST‘,                url:‘http://www.zhouxiaohouer.com/api/poststh‘,                data:{                    name:‘黃燜雞米飯‘,                    price:34                },                headers: {                    ‘Content-Type‘:‘application/x-www-form-urlencoded‘                  },                transformRequest: [function (data, headers) {                    //轉換data資料的資料格式,一般返回一個序列化的字串                    //axios內封裝了一個qs模組,引入後可以直接轉換                    return data;                }],            }).then(res=>{                console.log(res.data)            }).catch(err=>{                console.log(err)            })   

  二、別名式:

axios.get(url[, config])axios.post(url[, data[, config]])

  以一個在vue組件裡的部分代碼說明

            import axios from ‘axios‘            import qs from ‘qs‘            getGoods(){              var _this = this              var data = {                filter:‘-_id -__v‘,              }              axios.post(                ‘http://www.zhouxiaohouer.com/api/poststh‘,                qs.stringify(data),                {                    headers: {                        ‘Content-Type‘:‘application/x-www-form-urlencoded‘                    }                })                .then(                    res=>{                        _this.msg = JSON.stringify(res.data)                    },                    err =>{                        console.log(err)                    }                )            }        

在axios中,我們還可以事先配置預設的全域配置

axios.defaults.baseURL = ‘https://www.zhouxiaohouer.com/api‘axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘

 

資料互動 axios

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: