在Vue中对外部资源进行访问fetch和axios

1.fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的优点：
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法

具体的用法是：

fetch('http://localhost:8181/messageBoard/messages', {method: 'GET', headers: {'content-type': 'application/json'}})

.then(response => response.json())

.then(json => {

　　console.log(json);

})

请求方式：post

请求参数：username,password

返回的结果：data

fetch('http://localhost:3000/users/register', {

         method: 'POST',

         headers: { 'Accept': 'application/json', 'Content-Type': 'application/json'},

         body: JSON.stringify({ username:userPhone, password: userPassword})

         }).then(response => response.json()).then(data => {  

               console.log(data)

               if(data.state){

                alert(data);

              }

        }

}

2.axios

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

具体的用法为：

首先在Vue项目中，输入 vue add axios

然后就可以使用：

axios.get('http://localhost:8181/messageBoard/messages)

.then(response => {

　　console.log(response.data)

})

 

 

参考资料：

https://www.jianshu.com/p/8bc48f8fde75