vue中axios统一封装异常

axios的封装

首先还没安装axios,先使用 npm install axios 安装 一般我会在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。

import axios from "axios";引入axios

js 复制代码
    // 配置axios对象
const requests = axios.create({
    //   基础路径
    baseURL: "http: //localhost:3000",  //后端的请求路径
    timeout: 3000, //   请求超出的时间
});

接着就是配置请求拦截器

js 复制代码
//请求拦截器:再发请求之前,请求拦截器可以检测的到,可以在请求发送出去之前做一些事情
requests.interceptors.request.use(
    (config) => {
    、、、、可以处理一些业务逻辑
        return config;
    },
    (err) => {
        return Promise.reject(new Error("file"));
    }
);

响应拦截器

js 复制代码
// 响应拦截器
requests.interceptors.response.use(
    (res) => {
        nprogress.done();
        return res.data; // 响应成功返回的数据
    },
    (err) => {
        return Promise.reject(err);
    }
);

export default requests;   // 暴露出去

统一封装get post请求

import requests from "../utils/request"; 将刚刚封装好的axios引入进来

js 复制代码
export function httpGet({ url, meth, params = {} }) {
  return new Promise((resolve, reject) => {
    requests({
      url,
      meth,
      params,
    })
      .then((reslut) => {
        resolve(reslut);
      })
      .catch((err) => {
        reject(err);  // 请求出错的异常就会在这里抛出 就不需要在vue文件中单独对每个请求抛出异常
      });
  });
}
js 复制代码
 //  post请求也是差不多意思 就是请求所携带的参数不一样
export function httpPost({ url, method, data = {} }) {
  return new Promise((resolve, reject) => {
    requests({ url, method, data })
      .then((reslut) => {
        resolve(reslut);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

api请求

import { httpGet, httpPost } from "./http"; 这里直接引入刚刚封装好的

js 复制代码
// 用户登录 post请求
export const reqUserLogin = (data) =>
  httpPost({ url: "/admin/login", method: "post", data });
  
  // 获取 目标列表 get请求 不带参数
export const reqGetTargetList = () =>
  httpPost({ url: "/admin/Target/getTargetList", method: "get" });
  
  // 添加 目标内容 get请求带query参数
export const reqAddTarget = (params) =>
httpGet({ url: "/admin/Target/addTarget", method: "get", params });

// 根据id 删除某一条目标 get请求 携带params参数
export const reqDeleteTarget = (id) =>
  httpPost({ url: `/admin/Target/deleteTarget/${id}`, method: "delete" });
相关推荐
Kier14 天前
🚀 前端实战:优雅地实现一个通用Blob文件下载方法
前端·javascript·axios
小钻风336622 天前
深入浅出掌握 Axios(持续更新)
前端·javascript·axios
香蕉可乐荷包蛋1 个月前
vue对axios的封装和使用
前端·javascript·vue.js·axios
每一步都算数1 个月前
Axios 取消请求的演进:CancelToken vs. AbortController
axios
blues_C1 个月前
九、【前后端联调篇】Vue3 + Axios 异步通信实战
vue.js·后端·django·axios·drf·测试平台
FungLeo1 个月前
Axios 如何通过配置实现通过接口请求下载文件
axios·接口下载文件·接口download
淡笑沐白2 个月前
Axios全解析:从基础到高级实战技巧
axios
前端OnTheRun2 个月前
新闻客户端案例的实现,使用axios获取数据并渲染页面,路由传参(查询参数,动态路由),使用keep-alive实现组件缓存
vue.js·axios·vue2·路由·vue-router
2301_799404912 个月前
AJAX 介绍
前端·ajax·axios
一只程序烽.2 个月前
err: Error: Request failed with status code 400
java·axios·web