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

总结