网络编程
位置:首页>> 网络编程>> JavaScript>> fetch网络请求封装示例详解

fetch网络请求封装示例详解

作者:tby_37  发布时间:2024-05-29 22:49:25 

标签: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, options)
   .then(res => res.json())
   .then(data => data)
}

使用

get

fetch网络请求封装示例详解

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>

来源:https://blog.csdn.net/tby_pr/article/details/121111392

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com