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

Posted abking

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue中对外部资源进行访问相关的知识,希望对你有一定的参考价值。

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);

})

 

1.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)
})
 
 
参考资料:

以上是关于在Vue中对外部资源进行访问的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中引入外部资源js

从外部文件访问 Vue

关于Vue-cli引入外部js资源文件失败的一点思路

如何在 vue.js 应用程序中访问外部 json 文件对象

如何从外部框架加载资源

使用 Vue Web 组件访问 Webpack 外部库