【JavaScript】fetch的模拟封装（基于promise封装的ajax方法）

最新推荐文章于 2023-07-24 15:42:29 发布
最新推荐文章于 2023-07-24 15:42:29 发布
阅读量529 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/112376772
版权

近期使用Worker线程，发现在其内部无法调用fetch方法，但可以使用原生的XMLHttpRequest对象、Headers对象、Request对象、Response对象、URLSearchParams对象，所以就模拟封装了一个可在Worker线程使用的 ajax 函数。

目录

一、源码

/**
 * [基于 promise 封装的 ajax 方法]
 * @param {string} url - [路径]
 * @param {object} init - [配置对象，还不是很完善]
 * return - 若成功则调用 resolve 并向 then() 传递结果。若失败则调用 reject 并传递错误对象
 * 
 * init 可配置属性：
 *  method - 请求方法，默认 'GET'，不区分大小写
 *  body - 传递参数，'GET / HEAD' 请求不许有参数
 *  headers - 头信息，该怎么写就这么写
 * 
 * Tips:
 *  1. 基于 promise 的简单封装，所以可以使用 then() 方法
 *  2. 可以在 worker 线程使用(将该函数放在 worker 线程再调用)
 */
function _fetch(url, init) {
  return new Promise((resolve, reject) => {
    // 若空参则直接返回 reject()
    if (!url && !init) {
      // 判断当前线程
      let thread = '';
      if (/window/gi.test(self.constructor.name)) {
        thread = 'Window';
      } else if (/worker/gi.test(self.constructor.name)) {
        thread = 'Worker';
      }

      // 创建错误对象
      const err = new TypeError(`Failed to execute '_fetch' on '${thread}': 1 argument required, but only 0 present.`);

      // 返回 reject()
      return reject(err);
    }

    // 初始化请求方法
    let method = !!init && !!init.method ? init.method : 'GET';
    // 初始化传递参数
    let params = null;
    
    // 创建请求实例
    const xhr = new XMLHttpRequest();

    // 初始化请求
    xhr.open(method, url, true);

    // 设置头信息
    if (!!init && !!init.headers) {
      // 遍历添加头信息
      for (let key in init.headers) {
        // 过滤非自身属性
        if (init.headers.hasOwnProperty(key)) {
          xhr.setRequestHeader(key, init.headers[key]);
        }
      }
    }

    // 设置请求得到的数据类型
    // 选blob，因为 Response 实例有 text()/json()/blob() 等方法进行转换
    xhr.responseType = 'blob';

    // 响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 请求成功
        if ( (xhr.status >= 200 && xhr.status < 300)
        || (xhr.status === 304) ) {
          // 创建 Response 实例
          const response = new Response(this.response);

          // 返回 resolve() 并传递 Response 实例给 then()
          return resolve(response);
          
        // 请求失败
        } else {
          // 错误提示字符串内容
          const err = new TypeError('Failed to _fetch');

          // 返回 reject() 并传递 Error 实例
          return reject(err);
        }
      }
    };

    // GET / HEAD 请求不能发送 data
    if (!!init && !!init.body
    && method.toUpperCase() !== 'GET'
    && method.toUpperCase() !== 'HEAD'){
      // 处理json格式与字符串两种参数
      if (({}).toString.call(init.body) === '[object Object]') {
        params = new URLSearchParams(init.body);
      } else {
        params = init.body;
      }
    }

    // 发送参数
    xhr.send(params);
  });
}

// ----------------- 示例 -----------------

// 1. 获取 blob
// _fetch('./demo.jpg')
// .then(res => res.blob())
// .then(res => conole.log(res));

// 2. 获取 json
// _fetch('./demo.json')
// .then(res => res.json())
// .then(res => console.log(res));

// 3. 获取 string
// _fetch('./demo.txt')
// .then(res => res.text())
// .then(res => console.log(res));

二、使用方法

1. 在主线程中使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="demo">
    <div class="txt"></div>
    <div class="pic"></div>
  </div>
  <script>
    // 获取 json 数据
    // _fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json')
    // .then(res => res.json())
    // .then(json => {
    //   console.log(json);
    //   document.querySelector('.txt').innerHTML = json.text;
    // });

    // 获取 blob 数据
    // _fetch('https://unsplash.it/1600/900')
    // .then(res => res.blob())
    // .then(blob => {
    //   console.log(blob);
    //   const img = document.createElement('img');
    //   img.src = URL.createObjectURL(blob);  // 生成 URL 实例
    //   img.onload = function () {
    //     this.width = 500;
    //     document.querySelector('.pic').appendChild(this);
    //     URL.revokeObjectURL(this.src);  	// 释放 URL 实例
    //   }
    // });

    
    // 使用 async / await 语法改写，使得语义更清晰
    (async function() {
      // json
      const response1 = await _fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json');
      const json = await response1.json();
      document.querySelector('.txt').innerHTML = json.text;
      
      // blob
      const response2 = await _fetch('https://unsplash.it/1600/900');
      const blob = await response2.blob();
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);  // 生成 URL 实例
      img.onload = function () {
        this.width = 500;
        document.querySelector('.pic').appendChild(this);
        URL.revokeObjectURL(this.src);  	// 释放 URL 实例
      }
    })();


    // _fetch 封装
    function _fetch(url, init) {
      return new Promise((resolve, reject) => {
        // 若空参则直接返回 reject()
        if (!url && !init) {
          // 判断当前线程
          let thread = '';
          if (/window/gi.test(self.constructor.name)) {
            thread = 'Window';
          } else if (/worker/gi.test(self.constructor.name)) {
            thread = 'Worker';
          }

          // 创建错误对象
          const err = new TypeError(`Failed to execute '_fetch' on '${thread}': 1 argument required, but only 0 present.`);

          // 返回 reject()
          return reject(err);
        }

        // 初始化请求方法
        let method = !!init && !!init.method ? init.method : 'GET';
        // 初始化传递参数
        let params = null;
        
        // 创建请求实例
        const xhr = new XMLHttpRequest();

        // 初始化请求
        xhr.open(method, url, true);

        // 设置头信息
        if (!!init && !!init.headers) {
          // 遍历添加头信息
          for (let key in init.headers) {
            // 过滤非自身属性
            if (init.headers.hasOwnProperty(key)) {
              xhr.setRequestHeader(key, init.headers[key]);
            }
          }
        }

        // 设置请求得到的数据类型
        // 选blob，因为 Response 实例有 text()/json()/blob() 等方法进行转换
        xhr.responseType = 'blob';

        // 响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            // 请求成功
            if ( (xhr.status >= 200 && xhr.status < 300)
            || (xhr.status === 304) ) {
              // 创建 Response 实例
              const response = new Response(this.response);

              // 返回 resolve() 并传递 Response 实例给 then()
              return resolve(response);
              
            // 请求失败
            } else {
              // 错误提示字符串内容
              const err = new TypeError('Failed to _fetch');

              // 返回 reject() 并传递 Error 实例
              return reject(err);
            }
          }
        };

        // GET / HEAD 请求不能发送 data
        if (!!init && !!init.body
        && method.toUpperCase() !== 'GET'
        && method.toUpperCase() !== 'HEAD'){
          // 处理json格式与字符串两种参数
          if (({}).toString.call(init.body) === '[object Object]') {
            params = new URLSearchParams(init.body);
          } else {
            params = init.body;
          }
        }

        // 发送参数
        xhr.send(params);
      });
    }
  </script>
</body>
</html>

2. 在 Worker 线程中使用

在这里插入图片描述

  • index.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>
</head>
<body>
  <div class="demo">
    <div class="txt"></div>
    <div class="pic"></div>
  </div>
  <script>
    const worker = new Worker('work.js');
    worker.onmessage = function (e) {
      console.log(e.data[0], e.data[1]);
      // txt
      document.querySelector('.txt').innerHTML = e.data[0].text;

      // pic
      const img = document.createElement('img');
      img.src = URL.createObjectURL(e.data[1]);  // 生成 URL 实例
      img.onload = function () {
        this.width = 500;
        document.querySelector('.pic').appendChild(this);
        URL.revokeObjectURL(this.src);  	// 释放 URL 实例
      }
    }
  </script>
</body>
</html>
  • work.js
// 使用 async / await 语法改写，使得语义更清晰
(async function() {
  // json
  const response1 = await _fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json');
  const json = await response1.json();
  
  // blob
  const response2 = await _fetch('https://unsplash.it/1600/900');
  const blob = await response2.blob();

  // 方便主线程读取
  const data = [json, blob];

  self.postMessage(data);
})();


// _fetch 封装
function _fetch(url, init) {
  return new Promise((resolve, reject) => {
    // 若空参则直接返回 reject()
    if (!url && !init) {
      // 判断当前线程
      let thread = '';
      if (/window/gi.test(self.constructor.name)) {
        thread = 'Window';
      } else if (/worker/gi.test(self.constructor.name)) {
        thread = 'Worker';
      }

      // 创建错误对象
      const err = new TypeError(`Failed to execute '_fetch' on '${thread}': 1 argument required, but only 0 present.`);

      // 返回 reject()
      return reject(err);
    }

    // 初始化请求方法
    let method = !!init && !!init.method ? init.method : 'GET';
    // 初始化传递参数
    let params = null;
    
    // 创建请求实例
    const xhr = new XMLHttpRequest();

    // 初始化请求
    xhr.open(method, url, true);

    // 设置头信息
    if (!!init && !!init.headers) {
      // 遍历添加头信息
      for (let key in init.headers) {
        // 过滤非自身属性
        if (init.headers.hasOwnProperty(key)) {
          xhr.setRequestHeader(key, init.headers[key]);
        }
      }
    }

    // 设置请求得到的数据类型
    // 选blob，因为 Response 实例有 text()/json()/blob() 等方法进行转换
    xhr.responseType = 'blob';

    // 响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 请求成功
        if ( (xhr.status >= 200 && xhr.status < 300)
        || (xhr.status === 304) ) {
          // 创建 Response 实例
          const response = new Response(this.response);

          // 返回 resolve() 并传递 Response 实例给 then()
          return resolve(response);
          
        // 请求失败
        } else {
          // 错误提示字符串内容
          const err = new TypeError('Failed to _fetch');

          // 返回 reject() 并传递 Error 实例
          return reject(err);
        }
      }
    };

    // GET / HEAD 请求不能发送 data
    if (!!init && !!init.body
    && method.toUpperCase() !== 'GET'
    && method.toUpperCase() !== 'HEAD'){
      // 处理json格式与字符串两种参数
      if (({}).toString.call(init.body) === '[object Object]') {
        params = new URLSearchParams(init.body);
      } else {
        params = init.body;
      }
    }

    // 发送参数
    xhr.send(params);
  });
}

三、Some Tips

  1. Worker 线程无法读取 window 对象，所以无法使用原生 fetch，但可以使用 XMLHttpRequest 对象（还有与AJAX相关的对象：Headers、Request、Response…），所以可以进行 ajax 操作，在 Worker 线程封装一个 fetch()；
  2. Worker 线程无法使用 DOM 对象，所以无法进行 DOM 操作，而需要将数据发送给主线程，再由主线程进行相关 DOM 操作；
  3. 为了尽可能的去还原 fetch，所以在封装里使用了 Response 对象，并将其实例传递给 then()，即，fetch().then() 里可以使用 response.json() 读取数据，在 _fetch().then() 中也是同样的操作（连报错提示也尽可能的去还原了）；
    在这里插入图片描述

四、获取 XML 数据

虽然原生的 AJAX（XMLHttpRequest 对象）可以通过 xhr.responseType = 'document' 来规定返回响应数据的类型为 ‘document’ 结构，读取 XML/HTML 数据，但 fetch() 和 _fetch()并没有响应的方法调用，去读取 XML/HTML（是的，就是要尽可能的去还原）。其主要原因是 Response 对象 并未提供对应转换方法。

所以，得借助 DOMParser 对象 去实现获取。

【关于 xhr.responseType，在 _fetch() 源码中设置的是 ‘blob’ 类型，如果更改，将无法正常调用相关读取方法，如：text()、json()、blob()等】

在这里插入图片描述
在这里插入图片描述

XML 部分

  • demo.xml
<?xml version="1.0" encoding="utf-8" ?>
<student>
	<member>
		<name>张三</name>
		<age>14</age>
		<gender>男</gender>
	</member>
	<member>
		<name>李四</name>
		<age>16</age>
		<gender>男</gender>
	</member>
	<member>
		<name>王五</name>
		<age>17</age>
		<gender>男</gender>
	</member>
	<member>
		<name>赵六</name>
		<age>13</age>
		<gender>女</gender>
	</member>
	<member>
		<name>田七</name>
		<age>15</age>
		<gender>女</gender>
	</member>
</student>

1. 主线程读取 XML 数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="xml"></div>
  <script>
    // _fetch('demo.xml')
    // .then(res => res.text())
    // .then(str => {
    //   // 创建解析对象
    //   const parser = new DOMParser();
    //   // 解析 XML 字符串，并传递给下一个 then()
    //   return parser.parseFromString(str, 'application/xml');
    // })
    // .then(data => {
    //   console.log(data.firstChild);
    //   // 获取 XML 第一个子节点，并添加给一个 DOM 元素
    //   document.querySelector('.xml').appendChild(data.firstChild);
    // });


    // 使用 async / await 语法改写，使得语义更清晰
    (async function() {
      // 发送请求
      const response = await _fetch('demo.xml');

      // 获取字符串
      const str = await response.text();

      // 创建解析对象
      const parser = new DOMParser();
      // 解析 XML 字符串，并得到 XML Document
      const xmlDocument = parser.parseFromString(str, 'application/xml');

      // 将 XML 第一个字节点添加给 DOM 元素
      document.querySelector('.xml').appendChild(xmlDocument.firstChild);
    })();


    // _fetch 封装
    function _fetch(url, init) {
      return new Promise((resolve, reject) => {
        // 若空参则直接返回 reject()
        if (!url && !init) {
          // 判断当前线程
          let thread = '';
          if (/window/gi.test(self.constructor.name)) {
            thread = 'Window';
          } else if (/worker/gi.test(self.constructor.name)) {
            thread = 'Worker';
          }

          // 创建错误对象
          const err = new TypeError(`Failed to execute '_fetch' on '${thread}': 1 argument required, but only 0 present.`);

          // 返回 reject()
          return reject(err);
        }

        // 初始化请求方法
        let method = !!init && !!init.method ? init.method : 'GET';
        // 初始化传递参数
        let params = null;
        
        // 创建请求实例
        const xhr = new XMLHttpRequest();

        // 初始化请求
        xhr.open(method, url, true);

        // 设置头信息
        if (!!init && !!init.headers) {
          // 遍历添加头信息
          for (let key in init.headers) {
            // 过滤非自身属性
            if (init.headers.hasOwnProperty(key)) {
              xhr.setRequestHeader(key, init.headers[key]);
            }
          }
        }

        // 设置请求得到的数据类型
        // 选blob，因为 Response 实例有 text()/json()/blob() 等方法进行转换
        xhr.responseType = 'blob';

        // 响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            // 请求成功
            if ( (xhr.status >= 200 && xhr.status < 300)
            || (xhr.status === 304) ) {
              // 创建 Response 实例
              const response = new Response(this.response);

              // 返回 resolve() 并传递 Response 实例给 then()
              return resolve(response);
              
            // 请求失败
            } else {
              // 错误提示字符串内容
              const err = new TypeError('Failed to _fetch');

              // 返回 reject() 并传递 Error 实例
              return reject(err);
            }
          }
        };

        // GET / HEAD 请求不能发送 data
        if (!!init && !!init.body
        && method.toUpperCase() !== 'GET'
        && method.toUpperCase() !== 'HEAD'){
          // 处理json格式与字符串两种参数
          if (({}).toString.call(init.body) === '[object Object]') {
            params = new URLSearchParams(init.body);
          } else {
            params = init.body;
          }
        }

        // 发送参数
        xhr.send(params);
      });
    }
  </script>
</body>
</html>

2. Worker 线程读取 XML 数据

  • index.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>
</head>
<body>
  <div class="xml"></div>
  <script>
    const worker = new Worker('work.js');
    worker.onmessage = function (e) {
      // 创建解析对象
      const parser = new DOMParser();
      // 解析 XML 字符串，并得到 XML Document
      const xmlDocument = parser.parseFromString(e.data, 'application/xml');
      // 将 XML 第一个字节点添加给 DOM 元素
      document.querySelector('.xml').appendChild(xmlDocument.firstChild);
    }
  </script>
</body>
</html>
  • work.js
// 使用 async / await 语法改写，使得语义更清晰
(async function() {
  // 发送请求
  const response = await _fetch('demo.xml');

  // 获取字符串
  const str = await response.text();

  // Worker 无法访问 window 对象，自然无法使用 DOMParser()
  self.postMessage(str);
})();


// _fetch 封装
function _fetch(url, init) {
  return new Promise((resolve, reject) => {
    // 若空参则直接返回 reject()
    if (!url && !init) {
      // 判断当前线程
      let thread = '';
      if (/window/gi.test(self.constructor.name)) {
        thread = 'Window';
      } else if (/worker/gi.test(self.constructor.name)) {
        thread = 'Worker';
      }

      // 创建错误对象
      const err = new TypeError(`Failed to execute '_fetch' on '${thread}': 1 argument required, but only 0 present.`);

      // 返回 reject()
      return reject(err);
    }

    // 初始化请求方法
    let method = !!init && !!init.method ? init.method : 'GET';
    // 初始化传递参数
    let params = null;
    
    // 创建请求实例
    const xhr = new XMLHttpRequest();

    // 初始化请求
    xhr.open(method, url, true);

    // 设置头信息
    if (!!init && !!init.headers) {
      // 遍历添加头信息
      for (let key in init.headers) {
        // 过滤非自身属性
        if (init.headers.hasOwnProperty(key)) {
          xhr.setRequestHeader(key, init.headers[key]);
        }
      }
    }

    // 设置请求得到的数据类型
    // 选blob，因为 Response 实例有 text()/json()/blob() 等方法进行转换
    xhr.responseType = 'blob';

    // 响应
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 请求成功
        if ( (xhr.status >= 200 && xhr.status < 300)
        || (xhr.status === 304) ) {
          // 创建 Response 实例
          const response = new Response(this.response);

          // 返回 resolve() 并传递 Response 实例给 then()
          return resolve(response);
          
        // 请求失败
        } else {
          // 错误提示字符串内容
          const err = new TypeError('Failed to _fetch');

          // 返回 reject() 并传递 Error 实例
          return reject(err);
        }
      }
    };

    // GET / HEAD 请求不能发送 data
    if (!!init && !!init.body
    && method.toUpperCase() !== 'GET'
    && method.toUpperCase() !== 'HEAD'){
      // 处理json格式与字符串两种参数
      if (({}).toString.call(init.body) === '[object Object]') {
        params = new URLSearchParams(init.body);
      } else {
        params = init.body;
      }
    }

    // 发送参数
    xhr.send(params);
  });
}

五、关于报错

1. 无参调用（还原了 fetch）

  • 主线程调用
    在这里插入图片描述
  • Worker 线程调用
    在这里插入图片描述

2. 请求失败（路径正确，但服务器未返回有效数据）

在这里插入图片描述
在这里插入图片描述

3. 路径错误

在这里插入图片描述

iuukai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android如何使用OKHttp
南 墙
01-13 1万+
首先要在build.gradle里面写入 // 添加OKHttp支持 implementation("com.squareup.okhttp3:okhttp:4.3.1") 下面是代码 下面是activity的java代码 package com.example.okhttpdemo; import androidx.appcompat.app.AppCompatActivi...
使用promise封装 原生ajax，$.ajax(),以及fetch。
weixin_51110899的博客
11-12 140
一、promise封装原生ajax let request = function (method="GET", url, data = "") { return new Promise((resolve, reject) => { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp") xhr.open(me
android中okhttp的使用
拖鞋王子猪
10-12 850
1.1 okhttp简介（原生） OKHttp是一款高效的HTTP客户端，支持连接同一地址的链接共享同一个socket，通过连接池来减小响应延迟，还有透明的GZIP压缩，请求缓存等优势，其核心主要有路由、连接协议、拦截器、代理、安全性认证、连接池以及网络适配，拦截器主要是指添加，移除或者转换请求或者回应的头部信息 这个库也是square开源的一个网络请求库(okhttp内部依赖okio
Android OkHttp的使用
Asinsd的博客
02-28 6131
android网络框架之OKhttp，一个处理网络请求的开源项目,是安卓端最火热的轻量级框架。android在开发的时候很少直接与数据库打交道，所以就有了通过接口的方式使android与数据库间接通信，通信方式就是使用okhttp插件。 1 okhttp的环境配置 implementation 'com.squareup.okhttp3:okhttp:4.9.0' 并且在清单文件中打开网络权限 2 OkHttp介绍 OkHttp分为get和post请求，在这两种请求中又分为同步和...
深入浅出Java并发多线程（6）- 线程停止、中断（3）
一角残叶的博客
12-08 191
1 停止线程相关的重要函数 Thread.interrupted（）的方法的目标对象是”当前线程“，而不管方法来自于哪个对象 1.1 如何分析 native 方法 https://github.com/openjdk-mirror/jdk7u-jdk https://github.com/openjdk-mirror/jdk7u-hotspot 2 停止线程-常见面试题 请求方，发出请求信号； 被请求方必须在每次循环中或者适当的时候检查这个中断信号，并且在可能抛出 inter
android okhttp基本使用
上上迁的专栏
02-14 266
1 引入包 compile 'com.squareup.okhttp3:okhttp:3.7.0' 2 get private void get() { ExecutorService executor = Executors.newSingleThreadExecutor(); executor.submit(new Runnable() { @Override public void run() {
基于原生ajax与封装的ajax使用方法(详解)
12-08
而封装的Ajax方法，如jQuery的`$.ajax()`或Fetch API，通常会简化这些步骤，提供更高级的功能，如Promise支持和错误处理。然而，理解原生Ajax的工作原理对于开发自定义解决方案或优化性能至关重要。 总结来说，本篇...
【前后端数据交互】原生JS的Fetch请求封装
最新发布
前端知识分享喵
07-24 886
AJAX 是最早出现请求数据的方式，它不需要不需要刷新整个页面即可更新部分数据。属于原生 JS 范畴 ，技术核心是 XMLHttpRequest 对象。fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
xe-ajax3.4.13.js 封装 fetch 异步请求 javascript 库
11-26
**xe-ajax 3.4.13.js：封装 fetch 的异步请求库** `xe-ajax` 是一个专门用于处理 HTTP 请求的 JavaScript 库，版本号为 3.4.13。它基于现代的 `Promise` API 进行设计，确保了在处理异步操作时的流畅性和可维护性。...
2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await
GAARA
09-16 626
文章目录 零.Promise 1.什么是Promise? 2.使用Promise有什么好处? 3.pending,fullfilled和rejected是什么? 3.resolved和rejected是什么? 4.then和catch是什么? 3.Promise的基本用法 零.Promise 1.什么是Promise? Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数) 语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息 2.使用Promise有什
Android中okhttp的基本用法2(okHttp的简单封装)
04-14
okHttp是当前最流行的网络框架之一，我参考了网上，别人的一些分装，自己封装了一下，放在这，供大家下载，希望和大家交流，学习
Android Okhttp 使用
weixin_37627774的博客
10-27 164
文章目录1.基本使用1.1 字符串读取1.2 文件下载1.3 文件上传2. 参考 1.基本使用 1.1 字符串读取 //这个程序下载一个URL并将其内容返回为字符串 OkHttpClient client = new OkHttpClient(); String getStringFromUrl(String url) throws IOException { Request request = new Request.Builder() .url(url) .build();
Android 网络请求框架 OkHttp 的使用
baipenggui_bo
03-04 1万+
一.OkHttp的历史和意义一个处理网络请求的开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso)用于替代HttpUrlConnection和Apache HttpClient(android API23 6.0里已移除HttpClient,现在已经打不出来)。尽管Google在大部分安卓版本中推荐使用HttpURLConnection，但是这个类相...
Android：OkHttp的理解和使用
热门推荐
JMW1407的博客
06-14 2万+
OkHttp的理解和使用OkHttp1、什么是OkHttp2、OkHttp的作用3、Okhttp的基本使用3.1、Http请求和响应的组成3.2、OkHttp请求和响应的组成3.3、GET请求同步方法3.4、GET请求异步方法3.5、post请求方法3.6、POST请求传递参数的方法总结3.6.1、Post方式提交String3.6.2、Post方式提交 `流`3.6.3、Post方式提交文件3.6.4、Post方式提交表单3.7、POST其他用法3.7.1、提取响应头3.7.2、使用Gson来解析JSO
Android okhttp使用
qinxuexiang_blog的博客
05-03 815
简介 OKHttp是一个十分常用的网络请求框架了，用于android中请求网络。 除了OKHttp，如今Android中主流的网络请求框架有： Android-Async-Http Volley OkHttp Retrofit 依赖库导入 在build.gradle添加如下依赖 implementation 'com.squareup.okhttp3:okhttp:4.9.0' 添加网络权限 <uses-permission android:name="android.per.
Android--OkHttp的使用
weixin_56504344的博客
08-23 229
首先添加OkHttp库的依赖： implementation("com.squareup.okhttp3:okhttp:4.9.1") 下面看一下OKHttp的具体用法： 1.首先需要创建OKHttpClient的实例 OkHttpClient client = new OkHttpClient(); 2.接着发送一条HTTP请求，就需要创建Request对象 Request request = new Request.Builder().build(); 这是空的Request对象，并没有实际作用，
Android之网络请求2————OkHttp的基本使用
weixin_50961942的博客
11-08 5518
okhttp是一个第三方库，用于Android中网络请求这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso和LeakCanary)。用于替代HttpUrlConnection和Apache HttpClient(android API23 里已移除HttpClient)。
【Android开发基础】网络交互-okHttp的使用
守夜人
06-05 313
okHttp是一套处理HTTP网络请求的依赖库，在Android开发中，我估计大部分软件都在使用他进行网络请求连接和数据交互。关于客户端和服务端的数据交互，用的比较熟练的就是okHttp和Gson的组合。使用okHttp进行网络交互，肯定绕不开网络权限。
android学习---使用OkHttp
liukeke的博客
09-24 1454
OkHttp是由鼎鼎大名的Square公司开发的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值