164.Vue实现个人博客（十二）【Vue2.0-axios替换vue-resource】 2019.03.16

0、知识点

• axios安装、使用

1、axios安装、引入方式

• axios是目前非常主流的一个http请求库，是基于promise实现异步操作的

// axios安装
npm install axios --save

// axios 使用CDN的方式引入
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// 导入axios到项目当中去使用
 import axios from 'axios'

2、axios功能特性

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 自动转换 JSON 数据
• 客户端支持保护安全免受 XSRF 攻击

3、ajax、axios、fetch区别

• axios和ajax及fetch原理浅析
• 这三个其实都是用来请求数据的，那他们的区别在哪里呢？
• 其实 axios 和 ajax都是对XMLHttpRequest这个对象的封装；而fetch则是window下的一个方法，是一个更底层的方法。

4、使用axios

• AddBlog.vue

 import axios from 'axios'
 methods:{
    post:function(){
      // this.$http.post("https://wd1182543348jfzvtq.wilddogio.com/posts.json",this.blog)
      // var _this = this;
      axios.post("/posts.json",this.blog) // 将v-resource的 this.$http.post请求方法替换成axios.post
          .then((data) => {
            // console.log(data);
            this.submmited = true;
          });
    }
  }

• 报错信息，“不能捕获到未定义的submmited！”
  

• 解决办法

  • 方法1：定义this，var _this = this
    
  • 方法2：使用ES6的箭头函数 => (推荐使用这种方法！！！)
    

• SingleBlog.vue

import axios from 'axios'
created(){
	// this.$http.get('https://wd1182543348jfzvtq.wilddogio.com/posts/' + this.id + ".json")
	   axios.get('/posts/' + this.id + ".json")
			.then((data) => {
				this.blog = data.data;
				})
		}