fetch网络请求封装示例分析

本篇内容主要讲解“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

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网络请求封装示例分析”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！