axios与fetch数据请求

axios

1. 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 ))
             }
         }
     })
     

2. post方法

   注意：axios中post请求如果你直接使用npmjs.com官网文档， 会有坑

   解决步骤：

   1. 先设置请求头

      //统一设置请求头
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
      

   2. 实例化 URLSearchParams的构造器函数得到params对象

   3. 使用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

    1. 设置请求头

    2. 通过 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会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）