vue2封装_vue2封装api接口-CSDN博客

本文链接：https://blog.csdn.net/weixin_70024734/article/details/132767797

文章讲述了如何在JavaScript中创建两个文件，reqest.js和api.js，使用axios库进行HTTP请求，并设置请求和响应拦截器处理不同状态码的错误。同时，api.js中的login函数演示了如何调用reqest.js中的API接口并处理登录请求。

摘要由CSDN通过智能技术生成

创建俩个js文件，

1.reqest.js

2.api.js

reqest.js

import axios from "axios";
import { Notification } from "element-ui";


// 创建axios实例
const instance = axios.create({
  baseURL: "http://your-base-url.com", // 替换成你的公共网址
});
那么请求拦截器和响应拦截器的axios的换成instance



//请求拦截器
axios.interceptors.request.use(
  (config) => {
    //配置请求类型
    config.headers = {
      "Conrent-Type": "application/json",
    };
    //配置token
    const token = localStorage.getItem("token");
    if (token) {
      // debugger
      console.log(1);
      // config.headers.token = token;
      config.headers.Authorization =`Bearer `+ token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          Notification({
            typr: "error",
            title: "错误",
            message: "错误请求",
            duration: 2,
          });
          break;
        case 401:
          Notification({
            typr: "error",
            title: "错误",
            message: "认证失败",
            duration: 2,
          });
          break;
        case 403:
          Notification({
            typr: "error",
            title: "错误",
            message: "拒接访问",
            duration: 2,
          });
          break;
        case 404:
          Notification({
            typr: "error",
            title: "错误",
            message: "请求错误，未找到资源",
            duration: 2,
          });
          break;
        case 405:
          Notification({
            typr: "error",
            title: "错误",
            message: "请求方法未允许",
            duration: 2,
          });
          break;
        case 408:
          Notification({
            typr: "error",
            title: "错误",
            message: "请求超时",
            duration: 2,
          });
          break;
        case 500:
          Notification({
            typr: "error",
            title: "错误",
            message: "服务端出错",
            duration: 2,
          });
          break;
        case 501:
          Notification({
            typr: "error",
            title: "错误",
            message: "网络未实现",
            duration: 2,
          });
          break;
        case 502:
          Notification({
            typr: "error",
            title: "错误",
            message: "网络错误",
            duration: 2,
          });
          break;
        case 503:
          Notification({
            typr: "error",
            title: "错误",
            message: "服务不可用",
            duration: 2,
          });
          break;
        case 504:
          Notification({
            typr: "error",
            title: "错误",
            message: "网络超时",
            duration: 2,
          });
          break;
        case 505:
          Notification({
            typr: "error",
            title: "错误",
            message: "http版本不支持该请求",
            duration: 2,
          });
          break;
        default:
          Notification({
            typr: "error",
            title: "错误",
            message: `连接错误${error.response.status}`,
            duration: 2,
          });
          break;
      }
    } else {
      Notification({
        typr: "error",
        title: "错误",
        message: "网络错误",
        duration: 2,
      });
    }
    return Promise.reject(error.response);
  }
);

export default {
  //get
  get(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params, headers).then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      );
    });
  },
  //pos
  post(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params, headers).then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      );
    });
  },
  //put 修改请求
  put(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, params, { headers }.then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      ));
    })
  },
  //delete 删除请求
  delete(url, params = {}, headers = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, { params, headers }.then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      ));
    })
  },
};

api.js

import reduce from "./reqest";
export const login = (params)=>{
     return reduce.post("/prod-api/login",params)
}

在页面中

login({
           username: this.ruleForm.username,
           password: this.ruleForm.password,
           uuid: this.ruleForm.uuid,
           code: this.ruleForm.code
            }).then(res => {
                console.log(res);
            })