axios與fetch資料請求

axios

get方法

無參數

new Vue({
    el: '#app',
    getDate () {
        axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))   
    }
})

有參數

new Vue({
    el: '#app',
    getDate () {
        axios({
            url: 'http://xxx',
            method: 'get',//預設就是get,這個可以省略，
            params: {
                key: value
            }
        })
          .then( res => console.log( res ))
          .catch( error => console.log( error ))
    }
})

new Vue({
    el: '#app',
    methods: {
        get_be_data () {
            // 跨域請求線上資料 - 賣座
            axios({
                url: 'https://m.maizuo.com/gateway',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154549400038873748996477"}',
                    'X-Host': 'mall.film-ticket.film.list'
                },
                params: {
                    cityId: 330100,
                    pageNum: 1,
                    pageSize: 10,
                    type: 1,
                    k: 7675918
                }
            })  
                .then( res => console.log( res ))
                .catch( error => console.log( error ))
        }
    }
})

post方法

注意：axios中post請求如果你直接使用npmjs.com官網文檔，會有坑

解決步驟：

先設定請求頭

//統一設定請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

執行個體化 URLSearchParams的構造器函數得到params對象

使用params對象身上的append方法進行資料的傳參

var params = new URLSearchParams() //得到params對象，用來接收參數
      // params.append( key, value )  key就是參數名，value就是參數值
      params.append( 'a', 2 )
      params.append( 'b', 2 )
      axios({
        url: 'http://localhost/post.php',
        method: 'post',
        headers: {//單個請求設定請求頭
          'Content-Type': "application/x-www-form-urlencoded" //請求頭設定為表單送出的請求頭
        },
        data: params
      })
        .then( res => console.log( res ))
        .catch( error => console.log( error ))

fetch

fetch是原生javascript提供的，是以它可以當做全局變量使用，它是挂載在window對象身上的

請求資料的方法

get

參數要直接連接配接在url上

new Vue({
     el: '#app',
     methods: {
         getData () {
             fetch('./data/data.json')
                 .then( res => res.json() ) //對資料進行格式化
                 .then( data => console.log( data ) ) // 這裡的data就是格式化後的資料
                 .catch( error => console.log( error )
         }
     }
 })

post

設定請求頭
通過 new URLSearchPrams 來攜帶參數

new Vue({
     el: '#app',
     methods:{
         postData () {
         fetch( 'http://localhost/post.php',{
           method: 'post',
           headers: new Headers({
             'Content-Type': 'application/x-www-form-urlencoded' // 指定送出方式為表單送出
           }),
           body: new URLSearchParams([["a", 1],["b", 2]]).toString() 
         })
           .then( res => res.text() )
           .then( data => console.log( data ))
           .catch( error => console.log( error ))
       }
     }
 })

格式化資料的方法
- .json() 格式化 json 類型資料，将 json類型 string 轉換成 json 對象
- .text() 格式化文本
- .blob() 格式化二進制資料
注意
- fetch 的 get 請求的參數是直接連接配接在url上的，我們可以使用Node.js提供的url或是qureystring子產品來将 Object --> String
- fetch 的請求傳回的是Promise對象，是以我們可以使用.then().catch(),但是要記住.then()至少要寫兩個，第一個then是用來格式化資料的，第二個then是可以拿到格式化後的資料
總結
- axios 和 fetch 沒有jsonp 資料請求類型的
- axios 和 fetch 使用的都是promise對象
- axios會對我們請求來的結果進行再一次的封裝（讓安全性提高）

axios與fetch資料請求

axios

fetch

總結