原生js的jsonp请求函数封装

最新推荐文章于 2024-09-20 10:26:14 发布

sfafoa

最新推荐文章于 2024-09-20 10:26:14 发布

阅读量735

点赞数

分类专栏： ajax 文章标签： javascript node.js

本文链接：https://blog.csdn.net/sfafoa/article/details/124120758

版权

本文介绍如何封装原生JavaScript的JSONP请求，提供一个客户端的HTML结构和JavaScript实现，以及服务端的Express和CORS配置示例。

摘要由CSDN通过智能技术生成

我们知道，jsonp也是一种请求的主流方式，每次书写起来太麻烦了，遂将他封装起来，方便我们日后使用，首先给上核心的封装函数：

    // api文档
    /*     jsonp中传入一个对象{
            url: 请求的地址
            data：请求的数据
            success：成功时候执行的函数
        } */


    function jsonp(options) {
        const script = document.createElement('script');
        let substitute01 = Math.random().toString();
        substitute01 = substitute01.replace('.', '_');
        let substitute02 = Math.random().toString();
        substitute02 = substitute02.replace('.', '_');
        const function_name = `fun${substitute01}_${substitute02}`;
        let params = '';
        //遍历对象
        for (const key in options.data) {
            params += '&' + key + '=' + options.data[key];
        }
        //这里还必须叫callback，否则后台的jsonp方法不识别