(十三)fetch-jsonp处理jsonp字符串(axios不支持jsonp)
jsonp
优势:
1:请求数据没有跨域的限制,也就是后台不用考虑跨域问题
2:对于老版本浏览器更加支持
缺陷::
1:只支持get请求,不支撑post请求或者其他请求,存在安全隐患,所有在请求接口的服务器必须是安全的情况下才能用
2:只要服务端支持跨域,一般都不会用jsonp,因为jsonp的请求方式只能是get请求和安全方面不是很到位
使用方式:
1:安装jsonp的模块,后面加上--save方便移动项目的时候也能使用模块
npm install fetch-jsonp --save
npm uninstall fetch-jsonp --save 卸载
2:服务端接口配置
[Route("JsonpList")]
[HttpGet]
public ContentResult JsonpList(string myCallBack, string userName)
{
List
new people() { name="zhangsan",no="111"} ,
new people() { name="李四",no = "222" }
};
return Content(String.Format("{0}({1});", myCallBack, JsonConvert.SerializeObject(peoples)));
3:页面层请求页面
(1)在main.js里面注册jsonp的全局变脸
import fetchJsonp from 'fetch-jsonp'; app.config.globalProperties.fetchJsonp=fetchJsonp; (2)定义页面html代码- {{ item.name }}--{{ item.no }}
(3)在data里面定义list data() { //把业务逻辑得数据渲染到页面上 return { list: [], }; }, (4)在methods:里面定义方法 getJsonpGet() { var that = this;//因为then后面是function不是箭头函数,所有呢里一定要把this提出来,否则直接在下面使用this.list=json,会出现list无效,(最好是不定义that,在.then后面直接使用箭头函数, .catch后面也使用箭头函数) this.fetchJsonp( "http://localhost:43597/api/Test/JsonpList?userName=zhangsan", { jsonpCallback: "myCallBack", } ) .then(function (response) { return response.json(); }) .then(function (json) { that.list = json; }) .catch(function (ex) { console.log("parsing failed", ex); }); }, 改成箭头函数( (response) =>)过后的getJsonpGet就可以在.then里面使用this了 getJsonpGet() { this.fetchJsonp( "http://localhost:43597/api/Test/JsonpList?userName=zhangsan", { jsonpCallback: "myCallBack", } ) .then( (response) =>{ return response.json(); }) .then( (json) =>{ this.list = json; }) .catch( (ex)=> { console.log("parsing failed", ex); }); }, 注意点: 在getJsonpGet方法里面,因为then后面是function不是尖括号,所有呢里一定要把this提出来,否则直接在下面使用this.list=json,会出现list无效,(最好是不定义that,在.then后面直接使用箭头函数 .catch后面也使用箭头函数))