Vue数据请求：axios & fetch

• 数据请求方式：
  • 封装ajax
  • jquery【.get/.post/.ajsx/.load】

Vue数据请求的方式

---

• 1.使用原生提供的fetch
• 2.使用第三方封装库：axios
  • Vue中可以统一对axios进行挂载
  • Vue.prototype.$http = axios
• 3.比较fetch和axios
  • axios 对已获得的数据进行了一层封装 XSRF
    • axios底层自动对数据进行了格式化
  • fetch并没有进行封装，拿到就是格式化后的数据
    • fetch进行了多一层的格式化
      • res.json()
      • res.blob() 格式化二进制
      • res.text()

Vue数据请求方式：axios

---

• 1.axios的特点：
  • axios对象在浏览器中创建浏览器对象
  • 底层使用Node.js的http模块实现
  • 可以拦截请求和响应
    • 功能：loading加载效果、登录拦截（Intercept拦截）
  • 转换请求和响应数据
  • 自动转换JSON数据
  • 客户端防止XSRF攻击
  • axios会自动封装数据
• 2.使用方法：
  • MOCK模拟数据的请求
    • 要求：** 必须和后端沟通好返回的数据字段**
    • 安装命令：npm i mockjs
    • 前端模拟数据
      • mock.js生成mock目录
      • jsonplaceholder：线上
      • 拷贝线上相似的数据：copy response
    • 后端接口的请求
      • 后端渲染模板：https://www.showdoc.cc/
      • 注意：post请求必须加请求头
• 3.axios拦截器：
  • axios.interceptors
  • 数据请求前拦截
  • 数据请求得到后拦截
• 4.总结：
  • get方法

    • 无参数

      axios.get(url)
      .then(res => console.log(res))
      .catch(err => console.log(err))
      

    • 有参数

      axios({
      	url:'http:/XXX',
      	method:'get	',//默认为get
      	params:{
      	key:value
      	}	
      })
      

  • post方法

    • 注意：axios中post请求npmjs.com官网用了之后有bug

    • 解决步骤：

      • 设置请求头
      • 实例化 URLSearchParams 的构造器函数得到params对象
      • 使用params对象的append方法进行数据的传参

    • 封装好的方法：

      // 统一设置请求头
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
      let params = new URLSearchParams()
      
      // params.append(key,value)
      
      params.append('a',1)
      params.append('b',2)
      
      axios({
          url: 'http://localhost/post.php',
          method: 'post',
          data: params，
            headers: {  //单个请求设置请求头
             'Content-Type': "application/x-www-form-urlencoded"
          }
      })
      .then(res => {
          console.log( res )
      })
      .catch( error => {
          if( error ){
          throw error
      }
      })
      
      

Vue数据请求方式：fetch

---

• 1.原生js提供了两种数据请求方式：
  • ajax
  • fetch
• 2.比较fetch和ajax：
  • ajax需要封装，而fetch不需要
  • ajax不太符合MV模式，fetch可以认为是为了MV模式量身打造
  • fetch也是promise
    • fetch(url,config).then().catch()
      • 第一个then是为数据格式化，可以格式化的数据类型有json、text、blob【二进制】
      • 第二个then才是得到的数据
• 3.请求方式
  • mock模拟数据请求
  • fetch请求动态数据
• 4.总结

  • get方法：

    fetch('http://localhost/get.php?a=1&b=2')
    	.then( data => {
    		console.log(data);
    	} )
    	.catch( error => {
    	if( error ){
    		throw error
    	} )
    

    • 注意：
      • fetch的get请求是直接连接在 url上的，可以使用Node.js提供的url或是queryString模块来将query转化为string；、
      • fetch的请求返回的是Promise对象，所以可以使用then().catch(),但是.then()至少要写两个，第一个then是为数据格式化，可以格式化的数据类型有json、text、blob【二进制】，第二个then才是得到的数据。

  • post方法

    • 请参照fetch文档：使用fetch

历史

---

• Vue1.0
  • Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource
  • vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
  • vue-resource使用形式和axios一样的
    • this.$http.get
    • this.$http.post
    • this.$http({})
    • vue-resource有jsonp方法,而axios是没有的
• Vue2.0
  • axios [ 可以说是目前最好的数据请求的封装库 ]
  • fetch