类式axios封装

/*
 * @Author: zhang gen yuan
 * @Date: 2021-09-16 17:08:16
 * @Descripttion: 
 */
'use strict'
import axios from 'axios'
import store from '/@/store'
import router from '/@/router'
import { Toast } from 'vant';

class HttpRequest {
    // #baseUrl
    constructor() {
        this.baseUrl = this.getBaseUrl()
        this.withCredentials = false
        this.timeout = 10000
    }

    getBaseUrl() {
        return process.env.VUE_APP_BASEURL
    }

    getConfig() {
        const config = {
            baseURL: this.baseUrl,
            timeout: this.timeout,
            withCredentials: this.withCredentials,
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
            }
        }
        return config
    }

    getParams(payload) {
        const { method, data } = payload
        if (['post', 'put', 'patch', 'delete'].indexOf(method) >= 0) {
            payload.data = data
        } else {
            payload.params = data
            delete payload.data
        }
        return payload
    }

    checkStatus(status) {
        let errMessage = ''
        switch (status) {
            case 400:
                errMessage = '错误请求'
                break
            case 401:
                errMessage = '未授权,请重新登录'
                break
            case 403:
                errMessage = '拒绝访问'
                break
            case 404:
                errMessage = '请求错误,未找到该资源'
                break
            case 405:
                errMessage = '请求方法未允许'
                break
            case 408:
                errMessage = '请求超时'
                break
            case 500:
                errMessage = '服务器端出错'
                break
            case 501:
                errMessage = '网络未实现'
                break
            case 502:
                errMessage = '网络错误'
                break
            case 503:
                errMessage = '服务不可用'
                break
            case 504:
                errMessage = '网络超时'
                break
            case 505:
                errMessage = 'http版本不支持该请求'
                break
            case 30002:
                errMessage = '用户不存在'
                break
            default:
                errMessage = `连接错误`
        }
        return errMessage
    }

    // 拦截处理
    setInterceptors(instance) {
        const that = this

        // 请求拦截
        instance.interceptors.request.use(config => {
            if (!navigator.onLine) {
                Toast("请检查您的网络是否正常")
                return Promise.reject('请检查您的网络是否正常')
            }
            console.log(config)
            if(store.state.user.userInfo && store.state.user.userInfo.token){
                config.headers["x-login-token"] = store.state.user.userInfo.token
            }
            return config
        }, (error) => {
            return Promise.reject(error)
        })

        //响应拦截
        instance.interceptors.response.use(res => {
            const result = res.data
            const type = Object.prototype.toString.call(result)
            // 如果是文件流 直接返回
            if (type === '[object Blob]' || type === '[object ArrayBuffer]') {
                return result
            } else {
                const { code, message } = result
                console.log(code,"code")
                return result
            }
        }, (error) => {
            if (error && error.response) {
                error.message = that.checkStatus(error.response.status)
            }
            const isTimeout = error.message.includes('timeout')
            const message = isTimeout ? '网络请求超时' : (error.message || '连接到服务器失败')
            Toast(message)
            return Promise.reject(error.message)
        })
    }

    request(options) {
        const instance = axios.create()
        const baseOpt = this.getConfig()
        const params = Object.assign({}, baseOpt, this.getParams(options))
        this.setInterceptors(instance)
        return instance(params)
    }
}

const http = new HttpRequest()
export default http

/*
 * @author: zhanggenyuan
 * @Description: 引流模块
 * @Date: 2022-06-02 10:25:30
 * @LastEditTime: 2022-06-02 10:28:16
 * @FilePath: \h5\src\api\drainage.js
 */
import http from "@/utils/request";

// 任务列表
export function getPlatformList(data) {
  return http.request({
    method: "post",
    url: "/lt-mission-platform/list",
    data,
  });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值