关于vue发送HTTP请求中出现问题Uncaught TypeError: Cannot read property 'jsonp' of undefined
最近在看跨域的问题，今天在为vue发送HTTP请求的时候，发现jsonp一直undefined，但是拎出来直接在html文件中运行又是可以的，经过检查，发现是因为对vue项目整体结构的不熟悉，由于网上也没有太多这个问题的信息，所以记录下来。Uncaught TypeError: Cannot read property 'jsonp' of undefined其实主要就是在main.js中...
最近在看跨域的问题，今天在为vue发送HTTP请求的时候，发现jsonp一直undefined，但是拎出来直接在html文件中运行又是可以的，经过检查，发现是因为对vue项目整体结构的不熟悉，由于网上也没有太多这个问题的信息，所以记录下来。
Uncaught TypeError: Cannot read property 'jsonp' of undefined
其实主要就是在main.js中添加声明！
import VueResource from 'vue-resource'
Vue.use(VueResource)具体如下图：
因为是基于vue项目的，所以这里先要理解一下整体vue的框架和HTTP请求的一些内容。
1.vue.js的HTTP请求
目前主流的vue项目，都是选择axios来完成ajax请求。大型项目都会使用vuex来管理数据，
一般使用axios发送AJAX请求--以下三种方式引入
1）npm的方式： $ npm install axios -S
2）bower的方式：$ bower install axios
3）cdn的方式：<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
不足：
axios本身并不支持发送跨域的请求，没有提供相应的API， 所以只能使用第三方库vue-resource.
2.vue整体项目结构
整体项目结构
图中很详细，在vue中，使用插件步骤：用vue-resource举例，
1）npm install vue-resource -S
2）在main.js中import这个插件，这个的作用是表示在vue文件中可以使用this.$http()进行网络请求--重要，不然会报题目中的错误
import VueResource from 'vue-resource'
Vue.use(VueResource)3.附上vue中使用JSONP解决跨域问题的源码
vue-resource中三种方式：
get
post
JSONP（支持跨域）
<html>
<head>
<title> 测试Vue 交互例子 </title>
<meta charset="GBK"/>
<script src="vue.min.js" type="text/javascript" charset="GBK"> </script>
<script src="vue-resource.min.js" type="text/javascript" charset="GBK"></script>
<script type="text/javascript">
window.onload = function (){
new Vue({ // 实例化Vue 对象
el:"#box",
data:{
resultMsgByGet:"", // 显示Get方式请求的结果
resultMsgByPost:"", // 显示Post 方式请求的结果
taoBaoData:[] // 定义一个数组，存放数据请求结果的集合
},
// 声明请求方法
methods:{
requestByGet: function (){
console.log("==========requestByGet==========")
this.$http.get("test.txt").then(function (successData){
this.resultMsgByGet = successData.data+"=======请求响应码是"+successData.status;
},function (errorData){
console.log("=====errorData==="+errorData)
});
},
requestByPost: function (){
console.log("==========requestByPost==========")
var baseUrl = "testlogin.php";// POST请求PHP 页面
var params = { // 请求数据
username:"小明",
userpass:"123456"
};
var otherParam = {
emulateJSON:true // 告诉服务器数据参数类型以JSON 传递接收。
};
this.$http.post(baseUrl,params,otherParam).then(function (successData){
this.resultMsgByPost = successData.data+"=======请求响应码是"+successData.status;
},function (errorData){
console.log("=====失败=====requestByPost=========="+errorData)
});
},
requestByJsonp: function (){
console.log("==========requestByJsonp==========")
var baseUrl = "https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb"
this.$http.jsonp(baseUrl).then(function(myData){
// 解析JSON数据
var myObj = JSON.parse(myData.bodyText);
var tempD= myObj.result;
console.log(tempD)
var tempC = [];
tempD.forEach(function(item){ // 遍历数据集合，取出数据，放入临时数组tempC
console.log();
tempC.push(item[0]);
});
this.taoBaoData = tempC;
},function(errorData){
console.log("==========errorData==========") //请求失败
})
}
}
})
}
</script>
</head>
<body>
<div id="box">
<h2> Vue 请求的方式</h2>
<ul>
<li> Get 请求 </li>
<li> Post 请求 </li>
<li> Jsonp 请求 </li>
</ul>
<input type="button" value="Get请求" @click="requestByGet()" />
<input type="button" value="Post请求" @click="requestByPost()" />
<input type="button" value="Jsonp请求" @click="requestByJsonp()" />
<p> Get 请求文件返回的结果是：{{resultMsgByGet}} </p>
<p> Post 请求PHP页面返回的结果是：{{resultMsgByPost}} </p>
<p> Jsonp 请求淘宝网页搜索数据返回的结果是： </p>
<ul>
<li v-for="item in taoBaoData">
<span>{{item}}</span>
</li>
</ul>
</div>
</body>
</html>
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)