fetch在vue中的封装使用_vue3 fetch封装

fetch的特性

定义

Fetch 是一个现代的概念, 约等同于 XMLHttpRequest，其最大的两个特性：

1. 可以在Service Workers使用；
2. 基于Promise，天然支持Proomise；

功能快捷键

在Vue 项目开发中，我们与接口打交道最多了，如何来优雅的使用请求变得尤为重要了。 通常我们通过客户端向后端发送HTTP请求来接收接口数据，然后将这些接口数据完美的呈现到网页上。
同时，与接口打交道那么就会用到网络请求，与 Vue 结合的网络请求库有哪些呢？
vue-resource
axios
fetch
本章将使用 fetch 来完成接口的请求，以及对fetch 请求的封装，来满足业务开发。

开始

fetch 是与 XMLHttpRequest同级的方式，而非对ajax的封装。所以在现代浏览器中可以直接使用，无需引用任何库类，低级浏览器中，需要使用降级方案，这点不在我们此次文章之中（IE:你们都看我干什么？）

封装requist.js

创建单独文件来封装Fetch，封装的同时，我们需要和 后端 协商好一些约定，如请求头 ， 状态码, 等等
同时可以引入必要的UI 提示框, 不同的状态码，提示不同的响应，

请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
状态码 : 根据接口返回的不同code ， 来执行不同的业务，这块需要和后端约定好。
响应拦截器： 这块就是根据 后端 返回来的状态码判定执行不同业务
首先，我们先看一下成品requist结构是什么样的

首先，第一步我们引入了vant的提示框
然后定义了一个 Request class，然后是对于错误请求的error处理，以及对于正确请求的success处理，以及需要业务弹窗错误的businessError处理。最后，是定义一个request对象，并将其export出去
然后我们看一下最核心的，即定义的Request class

class Request {
   
    constructor(parms) {
   
        this.withBaseURL = parms.withBaseURL
        this.baseURL = parms.baseURL
    }
    request(parames) {
   
        let url = parames.url || ''
        let method = parames.method || 'GET'
        let data = parames.data || ''
        this.withBaseURL = (url.indexOf('http') == -1)
        let requestUrl = this.withBaseURL ? this.baseURL + url : url;
        let options = {
   
            method
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16