(十三)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 peoples = new 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后面也使用箭头函数))