資料互動 axios

標籤：配置   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