关于vue发送HTTP请求中出现问题Uncaught TypeError: Cannot read property 'jsonp' of undefined

最新推荐文章于 2024-06-19 21:59:16 发布

矮肥圆VV

最新推荐文章于 2024-06-19 21:59:16 发布

阅读量1.6w

点赞数 6

分类专栏：前端开发文章标签： JSONP VUE跨域 VUE的HTTP请求 vue-resource

本文链接：https://blog.csdn.net/qq_29295351/article/details/81274097

版权

开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

最近在看跨域的问题，今天在为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

cmd

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>

矮肥圆VV

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
关于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中...
复制链接

扫一扫

专栏目录