js封装api

最新推荐文章于 2024-04-15 22:41:02 发布
最新推荐文章于 2024-04-15 22:41:02 发布
阅读量523 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ2856639881/article/details/106630147
版权

1、 http.js   

   import  '../js/jquery-3.3.1.min.js'  //这个地方居然要如此引用

import _url from './config.js'
import util from '../utils/util.js'
import  '../js/jquery-3.3.1.min.js'  //这个地方居然要如此引用

export default {
  /**
   * 传入 headers  data 
   */ 
  post: function (headers, jsonstr, url) {
    return new Promise((resolve, reject) => {
      $.ajax({
        headers: headers,
        type: 'POST',
        url: url,
        // async: false, // 同步
        data: jsonstr
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err.data)
      })
    });
  },
  //----------------------------------------------

  request_inner: function (is_hash, json, url) {
    if (url == null) {
      url = _url.obj
    }
    let headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
    var jsonstr = JSON.stringify(json)

    if (is_hash) {
      let loginid = util.getStorage('loginid')
      let hash = util.sha1(jsonstr + loginid)
      headers.token = hash
    }
    console.log(jsonstr)
    // loading.showLoading()
    return new Promise((resolve, reject) => {
      this.post(headers, jsonstr, url)
        .then(res => {
          console.log('res =', res)
          //if (res.statusCode === 200 && res.data != null) { }
          if (res != null) {
            if (res.s != null && res.s != 0) {
              console.log('出错时')
              reject(res) //出错时
            } else {
              console.log('正确时')
              resolve(res) //正确时
            }
          }
          // loading.hideLoading()
        })
        .catch(err => {
          console.log('catch', err)
          reject(err)
          // loading.hideLoading()
        })
    });
  },
  request_pub: function (json, url) {
    return this.request_inner(false, json, url)
  },
  request: function (json, url) {
    return this.request_inner(true, json, url)
  },
 
}

2、sdk.js

import _url from './config.js'
import http from './http.js' 


export default { 
  Api1: function (p1,p2,p3) {
    var json = {
     p1,p2,p3
    } 
    return http.request(json, _url.url1)
  }
}

3、html中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script type="module" src="./sdk/sdk.js"></script> -->
</head>
<body>
    <script type="module" >
            import enums from "./sdk/enums.js";
            import sdk from "./sdk/sdk.js";
            console.log(enums.enums.lus);
            
            sdk.Api1('admin', '123456', 'veri')

    </script>
</body>
</html>

 

QQ2856639881
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
封装api
yin_mkajs的博客
04-08 150
首先，新建一个http文件，然后再http文件里新建一个env.js文件来配置环境， 代码如下 //env.js //存放不同的环境地址 module.exports={ //线上地址 prod:{ baseUrl:'https://api.it120.cc' }, //测试地址 test:{ baseUrl:'https://www.05E.com' }, //本地地址 local:{ baseUrl:'https://www.
JavaScriptAPI动态页面函数封装
luobifeiyeshi0的博客
03-27 92
设定一物体宽高为200px，点击 “宽度到600px” 时，物体变为宽为600px，高为200px；点击 “宽度到800px” 时，物体变为宽为800px，高为200px.缺点：点击事件少的情况下还好，一旦点击事件多，代码就会冗余，不简洁。利用函数的封装，当需要某个值时，调用函数即可，不需再对原代码修改。
基于 JavaScript fetch() API 的简单封装
最新发布
narukeu的博客
04-15 365
JavaScript 的 `fetch()` API 提供了一种现代、易用的接口，用于从服务器异步获取资源。然而，在实际项目中，我们通常需要对基础的 `fetch(）` 进行封装，以实现诸如添加默认配置、处理响应状态、自动解析响应数据、以及处理认证令牌等常见需求。
动画以及封装
Llishiyi的博客
12-01 136
js的动画如何实现 利用js的事件，配合定时器，或者改变它的样式属性，比如颜色，位置等来完成 js动画的封装 把你要用到的常用动画自己封装起来（学会封装的思路），函数的本质就是把具有特点功能的代码封装在一起，所以，我们可以将动画中可变化的量当做参数进行封装。 一.offset、client、scroll系列 offset系列 offsetLeft:获取元素距离最左边的距离： (1)、如果父元素没有定位，距离浏览器最左侧的距离 (2)、如果父元素有定位，距离父元素最左侧的距离 offsetT
封装一个常用的js工具类
热门推荐
水痕
05-02 1万+
/** * @author:水痕 * @timer:2016-07-28 * @email:332904234@qq.com * @version:1.0 * @title:封装一个自己常用的工具类js * @note: */ ; (function(window, document, $) { window.utils = { ////////////
SpiderMonkey学习笔记（2）－－封装JSAPI
zxh的专栏
06-04 2590
上一篇文章搭建好了一个简单的SpiderMonkey测试环境，并且把JSAPI User Guide里的样板代码直接拷贝到了工程里。在这篇文章里，我将对JSAPI做一个简单的封装，以方便后续的学习和试验。 1）添加一个C++类，名字估且就叫JsEngine吧 右键点击SpiderMonkeyTest Group，在弹出菜单中点击New Files... 菜单项： 选择iOS -> C a
sqlite js封装的api
05-26
uniapp sqlite js封装的api
Api接口调用封装,实现POSt,GET等数据请求
06-29
Api接口调用封装,实现POSt,GET等数据请求，Api接口调用封装,实现POSt,GET等数据请求，Api接口调用封装,实现POSt,GET等数据请求，Api接口调用封装,实现POSt,GET等数据请求，Api接口调用封装,实现POSt,GET等数据请求，...
Vue中的封装api
01-08
我做vue和react的项目都是用的这一套api（时间戳是我新加的），接口，方法分开，便于管理。 sever.js import axios from 'axios' import qs from 'qs' /** * 自定义实例默认值 */ const instance = axios.create({...
微信小程序如何封装api接口
01-03
微信小程序如何封装api接口 首先创建个http文件夹（可自定义名字） 一：创建个env.js文件用来设置公共访问的url，即环境地址 module.exports = { //开发环境 dev:{baseUrl:http://localhost:3000}, //测试环境 ...
详解Vue中Axios封装API接口的思路及方法
10-14
主要介绍了详解Vue中Axios封装API接口的思路及方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【js 封装一个简单的异步API，获取异步操作结果和过程解析】
阿牛哥的博客
07-16 587
【js 封装一个简单的异步API，获取异步操作结果和过程解析】
利用原生js封装一个ajax api（一）
Holzpp的博客
01-14 3061
如何用原生js去实现一个ajax请求，以及如何自己封装一个ajax api，在这篇文章中我们会先做前提准备，了解如何用原生js实现一个Ajax请求，在下一篇中，了解如何封装一个ajax api
nodejs封装api
LPLIFE的博客
03-27 3215
安装了nodeJs 执行： 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 yarn（我使用这个，淘宝镜像总是莫名其妙各种bug。。。） npm install yarn -g 接着项目中执行： yarn add express --save yarn add body-parser...
api.js封装请求
weixin_30765475的博客
02-11 654
1. 传入对象格式如 { a:{ getData:{ url: 'xx/xx/xx', method: 'get', require:['id', 'name'], // 简单检查 必传参数确实则不发请求 changeParamsProp:{ // 防止后端更改参数名 ...
node.js如何封装一个接口
my_roads的博客
10-21 6958
用到的应用： 1.webstorm  2.Navicat for MySQL 3.postman 一.使用express创建项目 1. npm install express-generator -g 2. express myapp 二.使用Navicat for MySQL将mysql表引入,开启数据库 三.项目中引入sequlize-auto 参考文档：htt
JS的高德API封装
小小黑
09-26 2465
function MapUtil() { var map = null; var geolocation = null; var geocoder = null; var inputId = null; } /** * 创建或者获取 */ MapUtil.prototype.m = function (containerId) { if (this.map == null) { t
JavaScript Worker API 源代码封装
09-10
### 回答1： JavaScript Worker API 是 JavaScript 中的一种 Web API，可以在后台线程中运行 JavaScript 代码。您可以使用它来执行耗时的任务，而不会阻塞主线程。 下面是一个简单的 JavaScript Worker API 封装的示例： ``` // 创建一个新的 Worker var worker = new Worker('worker.js'); // 向 Worker 发送数据 worker.postMessage({'msg': 'Hello World!'}); // 从 Worker 接收数据 worker.onmessage = function(e) { console.log('Worker said: ', e.data); } ``` 在上面的示例中，我们创建了一个名为 "worker.js" 的 Worker，然后向它发送一条消息。Worker 接收到消息后，会发送一条回复消息。 ### 回答2： JavaScript Worker API 是一种使多线程编程成为可能的技术，它允许在后台运行的独立线程中执行 JavaScript 代码，以提高网页性能和用户体验。在使用 Worker API 来封装源代码时，可以遵循以下步骤： 1. 创建一个新的 Worker 对象：使用工厂函数 `new Worker()` 来实例化一个新的 Worker 对象。可以将需要在后台执行的 JavaScript 源代码文件的路径作为参数传递给该函数。 2. 添加事件监听器：通过使用 `addEventListener()` 方法，为 Worker 对象添加适当的事件监听器来处理 Worker 线程的事件。其中最重要的事件是 `message` 和 `error` 事件。 3. 在主线程中发送消息：通过调用 `postMessage()` 方法，在主线程中将消息发送到 Worker 线程中。可以将任何类型的数据作为参数传递给该方法。 4. 在 Worker 线程中接收消息：在 Worker 线程中使用 `onmessage` 事件监听器来接收在主线程中发送的消息。通过监听事件对象的 `data` 属性，可以获取来自主线程的数据。 5. 处理接收到的消息：在 Worker 线程中，使用接收到的消息来执行必要的操作。可以通过读取事件对象的 `data` 属性来获取主线程发送的数据。 6. 在 Worker 线程中发送消息：类似地，在 Worker 线程中，可以使用 `postMessage()` 方法将消息发送回主线程。主线程可以通过监听 `message` 事件来接收这些消息。 7. 结束 Worker 线程：在适当的时候，可以调用 `terminate()` 方法来结束 Worker 线程的执行。 封装 JavaScript Worker API 的源代码需要遵循以上步骤以实现多线程的并行处理，提高网页性能和用户体验。通过合理使用 Worker API，可以在后台执行复杂的任务，如图像处理、数据计算和网络请求，而不会阻塞主线程的执行。这样可以确保用户界面的流畅运行，并提高网页的响应速度。 ### 回答3： JavaScript Worker API 提供了一种在后台线程中执行 JavaScript 代码的方法，以避免主线程中的阻塞。以下是对 JavaScript Worker API 源代码封装的概述。 首先，我们需要创建一个新的 Worker 对象，通过指定 JavaScript 文件的 URL 来加载要执行的后台脚本。这可以通过以下代码实现： ```javascript const worker = new Worker('worker.js'); ``` 接下来，我们可以通过在主线程中使用 postMessage 方法向 Worker 发送消息，并通过 onmessage 事件监听来自 Worker 的响应。Worker 进程中的代码可以通过使用 self 关键字访问自身，使用 addEventListener 方法监听来自主线程的消息，并使用 postMessage 方法向主线程发送响应。下面是一个示例： ```javascript // 主线程 worker.postMessage('Hello from main thread!'); worker.onmessage = function(event) { console.log('Worker said:', event.data); }; // Worker 进程 self.addEventListener('message', function(event){ console.log('Message from main thread:', event.data); self.postMessage('Hello from worker!'); }); ``` 在以上示例中，主线程向 Worker 发送消息并监听响应，而 Worker 进程接收来自主线程的消息并发送响应。 另外一个重要的功能是监听错误事件，以便及时处理可能出现的问题。我们可以使用 onerror 事件监听来自 Worker 进程的错误，并在发生错误时采取相应的措施。以下是一个示例： ```javascript worker.onerror = function(event) { console.log('Worker error:', event.message); }; ``` 除了上述基本功能，JavaScript Worker API 还提供了其他一些方法和属性，例如终止 Worker 进程、关闭 Worker 进程、测量 Worker 执行时间等。 总结起来，JavaScript Worker API 允许我们在后台线程中执行 JavaScript 代码，以提高主线程的性能。我们可以通过创建 Worker 对象、使用 postMessage 和 onmessage 监听来回传递消息，并在主线程和 Worker 进程之间实现双向通信。此外，我们还可以监听错误事件并采取相应的措施来处理错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值