Detailed explanation of fetch network request encapsulation example

Detailed explanation of fetch network request encapsulation example

export default ({
  url,
  method = 'GET',
  data = null,
}) => {
  // Request configuration let options = {
    method
  }
  // When data is not empty, it is a post request if (data) {
    options = {
      ...options,
      body: JSON.stringify(data),
      headers: {
        'content-type': 'application/json'
      }
    }
  }
  return fetch(url, options)
    .then(res => res.json())
    .then(data => data)
}
 

use

get

post

<script type="module">
  import fetchApi from './js/fetch.js'
  const vm = new Vue({
    el: '#app',
    data: {
      users: []
    },
    // Initiate network request 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>

The above is the detailed content of the detailed explanation of the fetch network request encapsulation example. For more information about fetch network request encapsulation, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Encapsulate fetch method and call instance based on axios
  • How to implement fetch request data
  • Detailed explanation of React Native network request fetch simple encapsulation
  • JavaScript uses fetch to implement asynchronous request method example
  • How to use fetch in vue project

<<:  MySQL Series 12 Backup and Recovery

>>:  The webpage cannot be opened because the div element lacks a closing tag

Recommend

How to encapsulate axios in Vue

Table of contents 1. Installation 1. Introduction...

Detailed tutorial on how to install MySQL 5.7.18 in Linux (CentOS 7) using YUM

The project needs to use MySQL. Since I had alway...

Example code for implementing dotted border scrolling effect with CSS

We often see a cool effect where the mouse hovers...

Four solutions for using setTimeout in JS for loop

Table of contents Overview Solution 1: Closures S...

How to add docker port and get dockerfile

Get the Dockerfile from the Docker image docker h...

Tutorial on Migrating Projects from MYSQL to MARIADB

Prepare the database (MySQL). If you already have...

K3s Getting Started Guide - Detailed Tutorial on Running K3s in Docker

What is k3d? k3d is a small program for running a...

Markup language - specify CSS styles for text

Click here to return to the 123WORDPRESS.COM HTML ...

Detailed explanation of cocoscreater prefab

Table of contents Prefab How to create a prefab T...

Detailed examples of Linux disk device and LVM management commands

Preface In the Linux operating system, device fil...

Detailed explanation of Linux system directories sys, tmp, usr, var!

The growth path from a Linux novice to a Linux ma...

Common commands for deploying influxdb and mongo using docker

Deploy database based on docker sudo docker pull ...

Example of how to set up a Linux system to automatically run a script at startup

Preface Hello everyone, I am Liang Xu. At work, w...