js简单的网络请求封装

最新推荐文章于 2024-05-08 00:02:34 发布
最新推荐文章于 2024-05-08 00:02:34 发布
阅读量513 收藏
点赞数
文章标签： json
原文链接：https://juejin.im/post/5c997e7a6fb9a070c6189441
版权

nodejs发送请求

下面代码参考的nodejs的版本10.15.3，建议安装10.15.3或更高的版本，简单的封装了get、post、jsonp三种请求方式

import https from 'https'
import http from 'http'
import qs from 'querystring'


const getReqType = url => {
  return url.startsWith('https://') ? https : http
}


export const getReq = (url, params, options = {}) => (new Promise((resolve, reject) => {
  let request = getReqType(url)
  let keys = Object.keys(params)
  url = keys.length ? (url + (url.indexOf('?') > -1 ? '&' : '?') + qs.stringify(params).replace(/\?$/g, '')) : url
  request.get(url, options, res => {
    var data = ''
    res.on('data', (chunk) => {
      data += chunk;
    })
    res.on('end', () => {
      resolve(data)
    })
  }).on('error', err => {
    reject(err)
  })
}))

export const postReq = (url, body, options = {}) => (new Promise((resolve, reject) => {
  let request = getReqType(url)
  let content = qs.stringify(body)
  options.headers = options.headers ? options.headers['content-type'] ? options.headers : {
    ...options.headers,
    'content-type': 'application/x-www-form-urlencoded'
  } : {
    'content-type': 'application/x-www-form-urlencoded'
  }
  options.headers['Content-Length'] = Buffer.byteLength(content, 'utf8')

  let req = request.request(url, {
    ...options,
    method: 'POST',
  }, res => {
    res.setEncoding('utf8');
    var data = ''
    res.on('data', (chunk) => {
      data += chunk
    })
    res.on('end', () => {
      resolve(data)
    })
  }).on('error', err => {
    reject(err)
  })
  req.write(qs.stringify(content))
  req.end()
}))

export const jsonp = async (url, params) => {
  let callback = '_cb'
  if (params.callback) {
    callback = params.callback
  }
  let res
  const data = await getReq(url, { ...params,
    callback
  })
  eval(`function ${callback}(data){res=data}   ` + data)
  return res
}

export default {
  get: getReq,
  post: postReq,
  jsonp
}
复制代码

调用方法

import request from './req'
async function getData() {
  const res = await request.get('http://localhost:3000/get', {
    name: 'shibin'
  })
}
getData()
复制代码

浏览器发送请求

下面是使用es5封装的

var  _jpid = 0

function Request() {
  var util = {}
  util.get = util.GET = function(url, params, cb) {
    this._formatRequest(url, 'GET', params, db)
  }
  util.post = util.POST = function(url, data, cb) {
    this._formatRequest(url, 'POST', data, cb)
  }
  util._formatRequest = function(url, type, data, cb) {
    util.ajax({
      url: url,
      type: type,
      data: data,
      success: function(res) {
        cb(res)
      },
      error: function(err) {
        cb('', err)
      }
    })
  }
  util.ajax = function(opt) {
    var xhr = XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject
    var type = opt.type.toUpperCase(),
      data = opt.data,
      url = opt.url,
      dataArr = []
    for (var k in data) {
      if (typeof data[k] !== 'undefined') {
        dataArr.push(k + '=' + data[k])
      }
    }
    if (type === 'GET') {
      url = dataArr.length ? (url + (url.indexOf('?') > -1 ? '&' : '?') + dataArr.join('&')).replace(/\?$/g, '') : url
      xhr.open(type, url, true)
      for (var k in opt.headers) {
        xhr.setRequestHeader(k, opt.headers)
      }
      xhr.send()
    } else if (type === 'POST') {
      xhr.open(type, url, true)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      for (var k in opt.headers) {
        xhr.setRequestHeader(k, opt.headers)
      }
      xhr.send(dataArr.join('&'))
    } else if (type === "JSONP") {
      util.jsonp(opt)
    }
    xhr.onload = function() {
      var res = JSON.parse(xhr.responseText)
      if (xhr.status === 200 || xhr.status === 304) {
        if (opt.success && opt.success instanceof Function) {
          var res = JSON.parse(xhr.responseText)
          if (xhr.status === 200 || xhr.status === 304) {
            opt.success.call(xhr, res)
          } else {
            opt.error.call(xhr, res)
          }
        }
      } else {
        if (opt.error && opt.error instanceof Function) {
          opt.error.call(xhr, res)
        }
      }
    }
  }

  util.inQueryUrl = function(url, data) {
    if (!data) {
      return url
    }
    var str = url + '?'
    for (var k in data) {
      var item = k + '=' + data[k] + '&'
      str += item
    }
    str = str.slice(0, str.length - 1)
    return str
  }
  util.jsonp = function(opt) {
    var callbackName = opt.jsonp || ((opt.data && opt.data.callback) ? opt.data.callback : '_jp' + _jpid++)
    opt.data.callback = callbackName
    var head = document.getElementsByTagName('head')[0]
    var data = formatParams(opt.data)
    var script = document.createElement('script')
    head.appendChild(script)
    window[callbackName] = function(json) {
      head.removeChild(script);
      clearTimeout(script.timer);
      window[callbackName] = null;
      if (opt.success && opt.success instanceof Function) {
        opt.success.call(window, json)
      }
    }
    script.src = opt.url + '?' + data
    if (opt.time) {
      script.timer = setTimeout(function() {
        window[callbackName] = null;
        head.removeChild(script);
        opt.error && opt.error({
          message: '超时'
        });
      }, time)
    }
  }
  return util
}

function formatParams(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  };
  // 添加一个随机数，防止缓存
  arr.push('v=' + random());
  return arr.join('&');
}
// 获取随机数
function random() {
  return Math.floor(Math.random() * 10000 + 500);
}
复制代码

调用方法

var $=new Request()
$.ajax({
  url:'http://localhost:3000/post',
  type:'post',
  data:{
    name:'shibin'
  },
  success:function(res){
    console.log(res)
  },
  error:function(err){
    console.log(err);
  }
})

 $.get('http://localhost:3000/get', {
    name: 'shibin'
 }, function(res, err) {
    if (res) {
     console.log(res)
   } else {
     console.log(err);
   }
})
复制代码

下面是基于es6封装的

var __jpid = 0

class Request {
  get(url, params) {
    return new Promise((resolve, reject) => {
      this._formatRequest(url, 'GET', params, resolve)
    })
  }
  post(url, params) {
    return new Promise((resolve, reject) => {
      this._formatRequest(url, 'POST', params, resolve)
    })
  }
  _formatRequest(url, type, data, resolve) {
    this.ajax({
      url: url,
      type: type,
      data: data
    }).then(res => {
      resolve(res)
    })
  }
  ajax(opt) {
    return new Promise((resolve, reject) => {
      var xhr = XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject
      var type = opt.type.toUpperCase(),
        data = opt.data,
        url = opt.url,
        dataArr = []
      for (var k in data) {
        if (typeof data[k] !== 'undefined') {
          dataArr.push(k + '=' + data[k])
        }
      }
      if (type === 'GET') {
        url = dataArr.length ? (url + (url.indexOf('?') > -1 ? '&' : '?') + dataArr.join('&')).replace(/\?$/g, '') : url
        xhr.open(type, url, true)
        for (var k in opt.headers) {
          xhr.setRequestHeader(k, opt.headers)
        }
        xhr.send()
      } else if (type === 'POST') {
        xhr.open(type, url, true)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        for (var k in opt.headers) {
          xhr.setRequestHeader(k, opt.headers)
        }
        xhr.send(dataArr.join('&'))
      } else if (type === 'JSONP') {
        this.jsonp(opt, reject, resolve)
      }
      xhr.onload = function() {
        var res = JSON.parse(xhr.responseText)
        if (xhr.status === 200 || xhr.status === 304) {
          resolve(res)
          if (opt.success && opt.success instanceof Function) {
            opt.success.call(xhr, res)
          }
        } else {
          reject(res)
          if (opt.error && opt.error instanceof Function) {
            opt.error.call(xhr, res)

          }
        }
      }
    })

  }
  jsonp(opt) {
    return new Promise((resolve, reject) => {
      // var callbackName = opt.jsonp;
      var callbackName = opt.jsonp || ((opt.data && opt.data.callback) ? opt.data.callback : '_jp' + __jpid++)
      opt.data.callback = callbackName
      var head = document.getElementsByTagName('head')[0]
      var data = formatParams(opt.data);
      var script = document.createElement('script')
      head.appendChild(script)
      window[callbackName] = function(json) {
        head.removeChild(script);
        clearTimeout(script.timer);
        window[callbackName] = null;
        resolve(json)
        if (opt.success && opt.success instanceof Function) {
          opt.success.call(window, json)
        }
      }
      script.src = opt.url + '?' + data
      if (opt.time) {
        script.timer = setTimeout(function() {
          window[callbackName] = null;
          head.removeChild(script);
          reject({
            message: '超时'
          })
          opt.error && opt.error({
            message: '超时'
          });
        }, time)
      }
    })
  }
}

function formatParams(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  };
  // 添加一个随机数，防止缓存
  arr.push('v=' + random());
  return arr.join('&');
}
// 获取随机数
function random() {
  return Math.floor(Math.random() * 10000 + 500);
}
复制代码

调用方法

var $=new Request()
$.ajax({
  url:'http://localhost:3000/post',
  type:'post',
  data:{
    name:'shibin'
  }
}).then(res => {
    console.log(res)
})
复制代码

转载于:https://juejin.im/post/5c997e7a6fb9a070c6189441

weixin_34250709
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nodejs实现的http、https 请求封装操作示例
10-15
主要介绍了nodejs实现的http、https 请求封装操作,结合实例形式分析了node.js针对http、https 请求的封装与使用相关操作技巧,需要的朋友可以参考下
微信小程序网络请求封装
03-29
请求报文示例 请求报文示例   // request.js https://XXXXXXXX/XXX/yy/yyy var API_URL = 'https://XXXXXXXX/XXX/' function request(method, requestHandler) { var api_key = 'XXX' //用于加密的key var APPEND_...
js封装ajax的方法
我的乌托
01-02 2484
常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url : url, data : params, cache : false, success : function(data) { cb(data); }, ...
js 所有的网络请求方式
通俗易懂
05-31 3470
文章目录HTTP请求报文响应报文常见的状态码readyState 属性原生AJAXAJAX 简介XML 简介AJAX 的特点AJAX 的使用解决 IE 缓存问题ajax返回的状态jQuery-AJAXget 请求post 请求ajax 请求Axios-AJAXget 请求post 请求ajax 请求Fetch-AJAX跨域同源策略如何解决跨域JSONPCORS所使用的node服务代码Web Socket HTTP HTTP（hypertext transport protocol）协议『超文本传输协议』，
关于在原生js中的几种发送请求的方式，XHR，Fetch ，Axios，EventSource，长连接
weixin_72915006的博客
04-11 716
**POST 请求参数传递**：需要将参数作为 send 方法的参数传递，通常需要使用 FormData 对象来构造参数。这些是原生 JavaScript 中常用的几种请求方式以及它们的 GET 和 POST 请求参数传递的方法。- **GET 请求参数传递**：可以直接将参数附加在 URL 后面，形成查询字符串。EventSource不支持自定义配置，如果有可以参考这个。主要是讲fetch的方法。
JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）
激情人生，美好生活
08-17 5940
JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。
JS实现网络请求方法汇总
zhangxxxq的博客
08-24 1416
JS实现网络请求方法汇总 1.创建service，提供公共方法，模拟网络请求 import { Injectable } from '@angular/core'; import {Observable} from "rxjs"; @Injectable({ providedIn: 'root' }) export class RequestService { public data:string ="张三"; constructor() { } run(){ return t
封装好的ajax网络请求代码ajax.js
02-20
封装好的ajax网络请求代码ajax.js
UniApp中封装request网络请求包含GET、POST、PUT、DELETE等
10-27
通过这样的封装，我们可以极大地简化网络请求的代码，提高代码的可读性和维护性，同时也使得网络请求的逻辑更易于管理和测试。对于uni-app这样的跨平台框架，这样的封装尤其重要，因为它能确保在不同平台上保持一致...
微信小程序网络封装(简单高效)
10-18
微信小程序的网络封装是开发过程中一个重要的环节，它能够帮助开发者更高效地处理网络请求，减少重复代码，并提供统一的错误处理。本文将详细介绍如何在微信小程序中进行简单高效的网络封装，以及如何使用封装后的...
微信小程序中如何使用flyio封装网络请求
10-16
主要介绍了微信小程序中如何使用flyio封装网络请求，Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下
axios封装网络请求（方法二）
qq_45631770的博客
12-06 458
在项目中使用axios封装网络请求，实现请求拦截、响应拦截的处理函数，二次封装post请求和get请求
javascript请求封装
IT梅的博客
02-17 615
背景 很多人在写前端代码的时候，都不做请求封装，这样容易出现的情况是，假设在一个项目中，有100个页面，每个页面都需要向服务器发送请求，来完成数据的交互，突然有一天，产品的哥们说，咱们得加个请求的验证，给请求交互的data里，加一个加密的数据，来保证数据的安全性，如果未进行封装的话，这100个页面中，每个请求都需要改一次，这就是个很庞大的工程，所以，我们在开始写代码的时候，对请求的封装，是一个很重...
nodejs - http、https 请求封装
weixin_33672109的博客
06-20 979
2019独角兽企业重金招聘Python工程师标准>>> ...
Node js Http常用请求封装
天马3798
11-16 1666
一、Node js Http常用请求封装 常用的get请求，post请求封装 requestHelper.js模块定义 内容如下： var http = require('https');//如果是http请求引用http模块，如果是https请求引用https模块 var req = { //get请求封装 get: (link, data, callback) => { http.get(link, data, (req, res) => {
JavaScript学习—网络请求
最新发布
qq_57101277的博客
05-08 440
在 JavaScript 中，对象是一个用于与服务器交换数据的接口，允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。
js 原生网络请求
SK_study的博客
03-27 6210
学习原生网络请求，彻底了解ajax，axios原理
封装接口请求
qq_59076775的博客
04-24 4995
在做项目的时候,我们平常会对接口api进行一些封装。今天来教给大家一些简单的封装接口的方法。 一.request.js文件夹 通常情况下我们会在utils/request.js封装自己的api。 // 1.导入axios import axios from "axios"; // 2.创建axios副本 const _axios = axios.create({ baseURL: process.env.VUE_APP_BASE_API, }); // 3.请求拦截器 _axios.inte
js 网络请求封装
明耀的博客
05-19 800
api.js export default { BASE_URI: "http://192.168.1.4:7070/smart-sleep", getOpenId: '/wechat/getOpenId', // wxLogin: '/common/wxLogin', // register: '/common/register', // getAllDevice: '/self/getAllDevice', // addUserDevice: '/self/addUserDe
uniapp网络请求封装
08-10
下面是一个简单的网络请求封装示例： 1. 创建一个 request.js 文件，用于封装网络请求相关的方法。 ```javascript // request.js const BASE_URL = 'https://api.example.com'; // 接口请求的基础URL export ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值