axios请求封装

在这里插入图片描述

http.js

// untils / http.js
//导入封装好的axios实例
import request from './request'

const http = {
    get(url, params) {
        const config = {
            method: 'get',
            url: url
        }
        if (params) config.params = params
        return request(config)
    },

    post(url, params) {
        const config = {
            method: 'post',
            url: url
        }
        if (params) config.data = params
        return request(config)
    },

    delete(url, params) {
        const config = {
            method: 'delete',
            url: url
        }
        if (params) config.params = params
        return request(config)
    },

    put(url, params) {
        const config = {
            method: 'put',
            url: url
        }
        if (params) config.params = params
        return request(config)
    },
}

//导出
export default http

request.js

// untils / reuqest.js
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message } from 'element-ui';
//1. 创建新的axios实例,

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,

  // 超时时间 单位是ms,这里设置了3s的超时时间
  timeout: 3 * 1000
})

// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  config.headers = {
    'Content-Type': 'application/json' //配置请求头
  }
  //如有需要:注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie
  // const token = getCookie('名称');//这里取token之前,你肯定需要先拿到token,存一下
  const token = localStorage.getItem('token');//这里取token之前,你肯定需要先拿到token,存一下

  if (token) {
    //config.params = {'token':token} //如果要求携带在参数中
    config.headers.token = token; //如果要求携带在请求头中
  }
  return config
}, error => {
  Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理,关闭loading等

  return response
}, error => {
  /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权,请重新登录'
        break;
      case 403:
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        window.location.href = "/NotFound"
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时,请刷新当前页')
    }
    error.message = '连接服务器失败'
  }

  Message.error(error.message)
  /***** 处理结束 *****/

  //如果不需要错误处理,以上的处理过程都可省略
  return Promise.resolve(error.response)
})

//4.导出文件
export default service

api / 页面请求方法

import http from '@/untils/http'
// import qs from "qs";

//get请求
export function authCodeLogin(params) {
    return http.get('api/ian', params)
}

页面使用

 import { authCodeLogin  } from '../api/legalTransportationApi'

   mounted() {

         authCodeLogin().then(res => {
             console.log(res);
         })
    }

可定义baseurl

在这里插入图片描述

vue.config.js

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/256193.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出RPC:选取适合自己的RPC

文章目录 1、RPC概念&&背景1.1、RPC背景 1.2、RPC是什么,什么时候需要用到?2、进程间的通信 - IPC与RPC2.1、什么是IPC2.2、IPC与RPC联系 3、RPC的实现3.1、RPC实现的基本思路3.2、RPC实现的扩展方向 4、RPC的选择 1、RPC概念&&背景 1.…

Elasticsearch——快速入门

从零基础的内容开始介绍Elasticsearch,主要包含以下内容: Elasticsearch的定义、优点,以及典型的业务场景。Elasticsearch中重要的概念。Elasticsearch典型的接入方式。安装Elasticsearch。使用Kibana调试Elasticsearch。Elasticsearch节点的…

【LeetCode刷题笔记(8-3)】【Python】【接雨水】【双指针】【困难】

文章目录 引言接雨水题目描述提示 解决方案3:【双指针】结束语 接雨水 【LeetCode刷题笔记(8-1)】【Python】【接雨水】【动态规划】【困难】 【LeetCode刷题笔记(8-2)】【Python】【接雨水】【单调栈】【困难】 引言…

从如何使用到如何实现一个Promise

promise是什么?主要用来解决什么问题? Promise是异步编程的一种解决方案,比传统解决方案--回调函数和事件--更合理更强大。 Promise特点: (1)对象的状态不受外界影响。Promise对象代表一个异步操作&…

ModuleNotFoundError: No module named ‘openai.error‘

ModuleNotFoundError: No module named ‘openai.error’ result self.fn(*self.args, **self.kwargs) File “H:\chatGPTWeb\chatgpt-on-wechat\channel\chat_channel.py”, line 168, in _handle reply self._generate_reply(context) File “H:\chatGPTWeb\chatgpt-on-wec…

2023_Spark_实验二十九:Flume配置KafkaSink

实验目的:掌握Flume采集数据发送到Kafka的方法 实验方法:通过配置Flume的KafkaSink采集数据到Kafka中 实验步骤: 一、明确日志采集方式 一般Flume采集日志source有两种方式: 1.Exec类型的Source 可以将命令产生的输出作为源&…

性能加速包: SpringBoot 2.7JDK 17,你敢尝一尝吗 | 京东物流技术团队

前言 众所周知,SpringBoot3.0迎来了全面支持JDK17的局面,且最低支持版本就是JDK17,这就意味着,Spring社区将完全抛弃JDK8,全面转战JDK17。作为JAVA开源生态里的扛把子,Spring可以说是整个JAVA生态的风向标…

(8)Linux Makefile | 依赖关系,依赖方法

💭前言: 本篇文章会着重讲解Linux中的自动化构建代码工具: make/makefile的介绍与使用。 在Linux下编译代码时,每次都会输入 gcc code.c -o code.exe在删除可执行程序时,每次都会输入 rm -rf code.exe这样非常的不方便,很麻烦,于是乎学习自动化构建代…

原来Python的协程有2种实现方式

什么是协程 在 Python 中,协程(Coroutine)是一种轻量级的并发编程方式,可以通过协作式多任务来实现高效的并发执行。协程是一种特殊的生成器函数,通过使用 yield 关键字来挂起函数的执行,并保存当前的执行…

《Effective C++》学习笔记 续

条款31:将文件间编译依存关系降至最低 请记住: 支持”编译依存性最小化“的一般构想是:相依于声明式,不要相依于定义式。基于此构想的两个手段是Handle class和Interface class程序库头文件应该以”完全且仅有声明式“的形式存在…

uniapp 用于开发H5项目展示饼图,使用ucharts 饼图示例

先下载ucharts H5示例源码: uCharts: 高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台&#…

网络安全之Linux环境配置及Linux基础知识讲解<三>

目录 一.下载安装Vmware二.下载安装Kali三.Linux目录结构四.Linux文件属性五.文件目录管理六.vim编辑器 一.下载安装Vmware Vmware官网:https://www.vmware.com 二.下载安装Kali Kali包含数百种工具,可用于各种信息安全任务,例如渗透测试、…

(C++)将x减到0的最小操作数--滑动窗口

个人主页:Lei宝啊 愿所有美好如期而遇 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://le…

微机总线地址物理内存地址虚拟内存地址简介

硬件地址的相关概念 Raspberry Pi 发布适用于 ARM 外设的 BCM2835 数据表 地址映射 总线地址 物理地址 虚拟地址 页表和内存管理单元MMU 《 Linux内核设计与实现(第三版)》 树莓派博通BCM2835芯片手册 硬件地址的相关概念 总线地址 32位的操作系统 &…

【赠书活动】OpenCV4工业缺陷检测的六种方法

文章目录 前言机器视觉缺陷检测工业上常见缺陷检测方法延伸阅读推荐语 赠书活动 前言 随着工业制造的发展,对产品质量的要求越来越高。工业缺陷检测是确保产品质量的重要环节,而计算机视觉技术的应用能够有效提升工业缺陷检测的效率和精度。 OpenCV是一…

【机器学习】卷积神经网络(CNN)的特征数计算

文章目录 基本步骤示例图解过程 基本步骤 在卷积神经网络(CNN)中,计算最后的特征数通常涉及到以下步骤: 确定输入尺寸: 首先,你需要知道输入数据的尺寸。对于图像数据,这通常是 (batch_size, c…

1-完全理解以太坊智能合约

了解区块链 区块链技术的核心概念是分布式账本,它是许多参与者共享的特定类型的数据库。 这个特殊的数据库只是一个交易列表,记录着网络中发生的每笔交易。每个人都可以拥有自己的交易列表备份,再加上强有力的货币激励措施消除各方之间信任…

记录今日将C语言的Windows程序更改为python语言Windows程序,实现子窗口控制,类似微信程序框架最简单的原型

基本思路 为什么要选择python制作Windows应用程序,主要就是源代码直接展示,发现问题随时修改,同时可以不断增加新的功能方便。 由于C语言的Windows程序中结构类型在python中不能使用, 因此我们按照ctypes模块指导意见继承structu…

基于双目RGB图像和图像深度信息的三维室内场景建模matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 双目视觉原理 4.2 深度信息获取 4.3 表面重建 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…

STM32与Freertos入门(三)任务的创建、删除

1、串口配置 首先将串口进行配置,后续经常会应用,具体步骤点击:串口配置。 2、任务 创建一个任务,就是开辟一个空间、每个任务中都会有while(1)死循环。 2.1相关函数 动态创建:xTaskCreate…