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" });