fetch在vue中的封装使用

最新推荐文章于 2024-08-07 07:55:00 发布

豆轩

最新推荐文章于 2024-08-07 07:55:00 发布

阅读量3k

点赞数 2

分类专栏： javascript vue fetch 文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/wangjikuen/article/details/106517016

版权

本文介绍了在Vue项目中如何优雅地使用fetch进行接口请求。通过封装fetch为request.js，实现了请求头、状态码的处理，以及错误和成功响应的拦截器。封装后的fetch更加适合模块化使用，避免了潜在的bug。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

fetch的特性

fetch的特性

定义

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

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

功能快捷键

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

开始

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

封装requist.js

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

请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
状态码 : 根据接口返回的不同code ，来执行不同的业务，这块需要和后端约定好。
响应拦截器：这块就是根据后端返回来的状态码判定执行不同业务
首先，我们先看一下成品requist结构是什么样的
request.js结构
首先，第一步我们引入了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,
            credentials: 'include',
            headers: {
   
                'Content-Type': 'application/json; charset=UTF-8',
            }