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

A brief discussion on MySQL temporary tables and derived tables

About derived tables When the main query contains...

How to implement responsive layout with CSS

Implementing responsive layout with CSS Responsiv...

Sample code for partitioning and formatting a disk larger than 20TB on centos6

1. Server environment configuration: 1. Check dis...

JavaScript to implement random roll call web page

JavaScript writes a random roll call webpage for ...

Solution to the garbled problem of web pages when the encoding is set to utf-8

Recently, when I was writing web pages with PHP, I...

Record the whole process of MySQL master-slave configuration based on Linux

mysql master-slave configuration 1. Preparation H...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

JavaScript Basics: Error Capture Mechanism

Table of contents Preface Error Object throw try…...

Solve the problem of secure_file_priv null

Add secure_file_priv = ' '; then run cmd ...

HTML pop-up div is very useful to realize mobile centering

Copy code The code is as follows: <!DOCTYPE ht...

Several ways to change MySQL password

Preface: In the daily use of the database, it is ...

JavaScript event capture bubbling and capture details

Table of contents 1. Event Flow 1. Concept 2. DOM...

A brief analysis of the best way to deal with forgotten MySQL 8 passwords

Preface Readers who are familiar with MySQL may f...