当前位置: 首页>后端>正文

axios二次封装+状态码

axios二次封装+状态码,第1张

//首先引入axios

import axios from "axios";

// 引入element-plus 组件库

import { ElMessage } from "element-plus";

//然后通过create方法来创建一个请求服务

//然后create方法内有一些配置项,比如接口域名`baseURL`、接口请求超时时间`timeout`

//接口url`url`

//接口请求方式`method`等等,需要我们按需传入

// create an axios instance

const service = axios.create({

? // process.env.VUE_APP_BASE_URL, // 完整的api地址 = 接口域名+ 接口路径

? baseURL: "/api",

? // 完整url = 服务根url + 请求url拼接的; 服务根url来源于全局变量;请求url来源于api函数的url参数。

? // withCredentials: true, // 跨域请求时发送cookie

? timeout: 3000, // 请求超时时间 5s,请求超时

});

//下面会定义两个拦截器,分别是 `请求拦截器`,`响应拦截器`

//`请求拦截器`是前端请求后端接口前处理的一些逻辑,比如开启loading,配置header请求头等等

//`响应拦截器`就是后端响应我们前端,返回回来的数据,比如我们可以在这响应拦截器内拿到status Code

//拿到后端接口返回的code,关闭loading、根据code码处理一些详细的逻辑等等一系列操作

//request interceptor ? 请求拦截器

service.interceptors.request.use((config) => {

? ? // do something before request is sent。在发送请求之前做一些事情

? ? // 请求之前的设置

? ? // 添加请求头信息,可以根据需要自行选择,也可以不要

? ? // 例如请求头加入“tken”键

? ? config.headers["token"] = "xxxxxx";

? ? return config;

? },(error) => {

? ? // 请求错误时

? ? return Promise.reject(error);

? }

);

// 响应拦截器

service.interceptors.response.use((response) => {

? ? response.data.message &&

? ? ? ElMessage({

? ? ? ? message: response.data.message,

? ? ? ? type: "success",

? ? ? });

? ? // 对响应数据做点什么

? ? return response;

? },(error) => {

? ? switch (error.response.status) {

? ? ? case 300:

? ? ? ? ElMessage({

? ? ? ? ? message: "多种选择",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 301:

? ? ? ? ElMessage({

? ? ? ? ? message: "永久重定向",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 302:

? ? ? ? ElMessage({

? ? ? ? ? message: "临时重定向",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 303:

? ? ? ? ElMessage({

? ? ? ? ? message: "查看其他位置",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 304:

? ? ? ? ElMessage({

? ? ? ? ? message: "未修改",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 305:

? ? ? ? ElMessage({

? ? ? ? ? message: "使用代理",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 307:

? ? ? ? ElMessage({

? ? ? ? ? message: "临时重定向",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 400:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求参数错误",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 401:

? ? ? ? ElMessage({

? ? ? ? ? message: "访问没有权限",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 403:

? ? ? ? ElMessage({

? ? ? ? ? message: "访问被禁止",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 404:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求接口未找到",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 405:

? ? ? ? ElMessage({

? ? ? ? ? message: "方法禁用",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 406:

? ? ? ? ElMessage({

? ? ? ? ? message: "不接受",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 407:

? ? ? ? ElMessage({

? ? ? ? ? message: "需要代理授权",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 408:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求超时",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 409:

? ? ? ? ElMessage({

? ? ? ? ? message: "服务器在完成请求时发生冲突",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 410:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求的资源已永久删除",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 411:

? ? ? ? ElMessage({

? ? ? ? ? message: "需要有效长度",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 412:

? ? ? ? ElMessage({

? ? ? ? ? message: "未满足前提条件",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 413:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求实体过大",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 414:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求的 URI 过长",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 415:

? ? ? ? ElMessage({

? ? ? ? ? message: "不支持的媒体类型",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 416:

? ? ? ? ElMessage({

? ? ? ? ? message: "请求范围不符合要求",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 417:

? ? ? ? ElMessage({

? ? ? ? ? message: "未满足期望值",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 500:

? ? ? ? ElMessage({

? ? ? ? ? message: "服务器内部错误",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 501:

? ? ? ? ElMessage({

? ? ? ? ? message: "尚未实施",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 502:

? ? ? ? ElMessage({

? ? ? ? ? message: "错误网关",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 503:

? ? ? ? ElMessage({

? ? ? ? ? message: "服务不可用",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 504:

? ? ? ? ElMessage({

? ? ? ? ? message: "网关超时",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? ? case 505:

? ? ? ? ElMessage({

? ? ? ? ? message: "HTTP 版本不受支持",

? ? ? ? ? type: "warning",

? ? ? ? });

? ? ? ? break;

? ? }

? }

);

// 最后暴露我们声明的 service 服务

export default service;


https://www.xamrdz.com/backend/3qq1938269.html

相关文章: