axios二次封装+携带状态码

//首先引入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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Axios 是一个基于 Promise 的 HTTP 请求库,可以在浏览器和 Node.js 中使用。二次封装 axios 主要是为了方便使用和统一管理请求,通常我们会在二次封装中加入一些通用的处理逻辑,例如添加请求头、统一处理错误等。 以下是一个简单的 axios 二次封装示例: ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, }); // 添加请求拦截器 instance.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( response => { return response.data; }, error => { return Promise.reject(error.response.data); } ); export default instance; ``` 在这个示例中,我们通过 create 方法创建了一个 axios 实例,设置了基础 URL 和超时时间。然后通过添加请求拦截器,我们可以在每次请求中携带 token,以便后端验证用户身份。最后,通过添加响应拦截器,我们可以统一处理错误响应,返回对应的错误信息。 使用这个二次封装后的 axios,我们可以直接调用它的 get、post 等方法,例如: ```javascript import request from './request'; request.get('/users').then(data => { console.log(data); }).catch(error => { console.log(error); }); ``` 在这个示例中,我们通过 import 引入了之前封装好的 axios 实例,然后调用了它的 get 方法,请求了 /users 接口。如果请求成功,会输出响应数据,否则会输出错误信息。 需要注意的是,这里的 token 是从 localStorage 中获取的,你也可以从 cookie 或其他地方获取。同时,这个示例中还使用了 Promise.reject 方法,让错误信息可以继续向下传递,方便统一处理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小闫博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值