fetch网络请求封装示例详解

export default ({
  url,
  method = 'GET',
  data = null,
}) => {
  // 请求配置
  let options = {
    method
  }
  // data不为空时，它就是post请求
  if (data) {
    options = {
      ...options,
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      }
    }
  }
  return fetch(url, options)
    .then(res => res.json())
    .then(data => data)
}

使用

get

post 

<script type="module">
  import fetchApi from './js/fetch.js'
  const vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    // 发起网络请求
    mounted() {
      let url = 'http://localhost:3000/api/users'
      // fetchApi({ url }).then(data => console.log(data))
      fetchApi({ url, method: 'POST', data: { id: 200, name: 'aaa' } }).then(data => console.log(data))
    }

  })
</script>

以上就是fetch网络请求封装示例详解的详细内容，更多关于fetch网络请求封装的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript利用fetch实现异步请求的方法实例

    JavaScript利用fetch实现异步请求的方法实例

    前言 相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求.下面话不多说,来一起看看详细的介绍吧. 先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.

  • fetch 如何实现请求数据

    一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers. 二 与Ajax对比 使用Ajax请求一个 JSON 数据一般是这样: var xhr = new XMLHttpRequest(); xhr.

  • 详解React Native网络请求fetch简单封装

    在原生应用开发中,为了方便业务开发人员使用,我们一般会对网络库进行一些上传封装,而不是直接使用,例如基于AFNetworking库的iOS请求上层封装,Android的诸如volley,retrofit等.在前端开发中,一般使用fetch进行网络请求,相关介绍请查看fetch示例.其实对于开发来说,系统提供的fetch已经够用了,但是为了代码的整体结构,建议对fetch进行简单的Get/Post封装. 若不封装,我们看一下传统的写法: fetch('http://www.pintasty.cn/

  • 基于axios封装fetch方法及调用实例

    基础axios用法请看axios官网 //依赖于axios对私有ajax进行修改 import Qs from 'qs' import axios from 'axios' import router from 'router/index' import {errorPrompt, loading, closeLoading} from 'util/util' export const status = { SUCCESS: '100', NET_ERR: '101', // 网络连接异常,请稍

  • vue项目中使用fetch的实现方法

    fetch的由来和定义 fetch的由来  众所周知,传统 Ajax (指 XMLHttpRequest)是最早出现的发送异步请求技术,其核心是使用XMLHttpRequest对象.但是它也存在一些令人头疼的问题:XHR 是一个设计粗糙的 API,不符合关注分离的原则:配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好.而Fetch 的出现就是为了解决 XHR 存在的问题. fetch的定义和使用 MDN

  • fetch网络请求封装示例详解

    fetch网络请求封装示例详解

    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let options = { method } // data不为空时,它就是post请求 if (data) { options = { ...options, body: JSON.stringify(data), headers: { 'content-type': 'application/json' } } } return fetch(url, o

  • 微信小程序网络请求wx.request详解及实例

    微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

  • 微信小程序网络请求封装示例

    微信小程序网络请求封装示例

    网络请求 网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊. // 官方例子 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 小程

  • js fetch异步请求使用实例详解

    js fetch异步请求使用实例详解

    目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 总结 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请求和接收请求结果. 我们得要等待请求完成然后执行请求完成后的回调,来对接收到的请求结果做处理. fetch(url) 为了方便学习,我们借用一下uni-app教程的api接口. const url = 'https://unidemo.dcloud.net.cn/api/news' 我们需要知

  • Android网络请求框架Retrofit详解

    Android网络请求框架Retrofit详解

    介绍: Retrofit 是Square公司开发的一款针对Android网络请求的框架,Retrofit2底层基于OkHttp实现的,OkHttp现在已经得到Google官方认可,大量的app都采用OkHttp做网络请求.本文使用Retrofit2.0.0版本进行实例演示. 使用Retrofit可以进行GET,POST,PUT,DELETE等请求方式. 同步请求:需要在子线程中完成,会阻塞主线程. Response response = call.execute().body(); 异步请求:请

  • ASP.NET Core中间件计算Http请求时间示例详解

    ASP.NET Core通过RequestDelegate这个委托类型来定义中间件 public delegate Task RequestDelegate(HttpContext context); 可将一个单独的请求委托并行指定为匿名方法(称为并行中间件),或在类中对其进行定义.可通过Use,或在Middleware类中配置要传递给委托执行的方法(参数类型HttpContext,返回值类型Task). public static IApplicationBuilder Use(this IA

  • .Net Core下HTTP请求IHttpClientFactory示例详解

    使用方式 IHttpClientFactory有四种模式: 基本用法 命名客户端 类型化客户端 生成的客户端 基本用法 在 Startup.ConfigureServices 方法中,通过在 IServiceCollection 上调用 AddHttpClient 扩展方法可以注册 IHttpClientFactory services.AddHttpClient(); 注册之后可以像依赖注入DI似得在类中通过构造函数注入形式使用,伪代码: class A { private readonly

  • Vue+Mockjs模拟curd接口请求的示例详解

    在前后端分离的项目中常常会遇到当前端页面开发完成但是后端接口还没好,暂不支持联调的情况下,一般我们会用到mock数据这边简单说一下最常见且经常会遇到的curd接口模拟注:这边可以和后端先约定好接口路径以及入参返参的字段,避免二次修改 1.安装依赖,新建js文件,在文件中导入mock.js,模拟列表数据 yarn add mockjs const Mock = require("mockjs") const list = [] const length = 18 for (let i =

  • Vue项目的网络请求代理到封装步骤详解

    目录 1.创建vue项目 2.安装axios 3.进行config.js配置 4.main.js里引入 5.src目录下新建Utils文件夹,在内封装request.js 6.以login路由为示例 src文件下新建api文件,在api内新建login.js 7.在页面内引入方法,并使用 1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 devS

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

随机推荐