封装axios

1.新建文件夹

1. 在根目录创建 utils 文件夹
2. 创建 request 文件
3. 在 request 里引入 axios
4. 配置 基本路径和超时时间
5. 配置请求拦截和响应拦截
6. 新建api文件夹做导出。

2.引入axios

import axios form 'axios';
import ElementUI from "element-ui";
在main.js文件里面
axios.interceptors.request.use((request) => {
    //设置公共的Content-Type
    request.headers["Content-Type"] = "application/x-www-form-urlencoded";
  return request;
});
axios.interceptors.request.use((request) => {
  if(request.url == '/api/subject/saveOrUpdateSubject' || request.url == "/api/subject/saveOrUpdateAreaGoods"){
    request.headers["Content-Type"] = "application/json;charset=UTF-8";
  }else{
    request.headers["Content-Type"] = "application/x-www-form-urlencoded";
  }
  return request;
});

//设置一些错误的返回http状态码
axios.interceptors.response.use(
  (response) => {
    if (response.status === 500) {
      ElementUI.Message({
        message: "系统异常",
        type: "error",
      });
    }

    if (response.data.code === 402) {
      ElementUI.Message({
        message: response.data.msg,
        type: "error",
      });
      // sessionStorage.removeItem("nickname");
      router.push("/login");
    }
    if (response.data.code === 401) {
      ElementUI.Message({
        message: response.data.msg,
        type: "error",
      });
      // sessionStorage.removeItem("nickname");
      router.push("/login");
    }
    if (response.data.code === 500) {
      ElementUI.Message({
        message: response.data.msg,
        type: "error",
      });
    }
    return response;
  },
  (error) => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          ElementUI.Message({
            message: "错误请求",
            type: "error",
          });
          break;
        case 401:
          ElementUI.Message({
            message: "未授权，请重新登录",
            type: "error",
          });
          break;
        case 403:
          ElementUI.Message({
            message: "请求超时",
            type: "error",
          });
          error.message = "拒绝访问";
          break;
        case 404:
          ElementUI.Message({
            message: "请求错误，未找到该资源",
            type: "error",
          });
          break;
        case 405:
          ElementUI.Message({
            message: "请求方法未允许",
            type: "error",
          });
          break;
        case 408:
          ElementUI.Message({
            message: "请求超时",
            type: "error",
          });
          break;
        case 500:
          ElementUI.Message({
            message: "服务器异常",
            type: "error",
          });
          break;
        case 501:
          ElementUI.Message({
            message: "网络未实现",
            type: "error",
          });
          break;
        case 502:
          ElementUI.Message({
            message: "网路错误",
            type: "error",
          });
          break;
        case 503:
          ElementUI.Message({
            message: "服务不可用",
            type: "error",
          });
          break;
        case 504:
          ElementUI.Message({
            message: "网络超时",
            type: "error",
          });
          break;
        case 505:
          ElementUI.Message({
            message: "http版本不支持该请求",
            type: "error",
          });
          break;
        default:
          ElementUI.Message({
            message: `连接错误${error.response.status}`,
            type: "error",
          });
      }
    } else {
      ElementUI.Message({
        message: "网络出现问题，请稍后再试",
        type: "error",
      });
    }
  }
);

3.新建api文件设置方法和接口路径

import axios from "axios";
//引入qs做数据排序
import QS from "qs";

// 比如登录 post 请求
export const Login = (params) => {
  return axios.post(`/api/login`, QS.stringify(params)).then((res) => res.data);
};

//get请求
export const AdminHomeCount = () => {
  return axios.get(`/api/admin/home/count`).then((res) => res.data);
};

4.配置vue.config文件

const webpack = require("webpack");

module.exports = {
  devServer: {
    open: true,
    proxy: {
      "/api": {
        target: "api/", // 测试服务器
        target: "api/", // 本地服务器
        target: 'api/', // 线上服务器
        ws: true,
        changeOrigin: true, // 是否开启跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

5.在需要用到api接口的页面引入api文件的方法

//引入刚才写好的方法
import { Login } from "../api.js";

login() {
      // 验证表单
      this.$refs.loginFormRef.validate((valid) => {
        if (!valid) return;
        // 传入loginForm表单
        Login(this.loginForm).then((data) => {
          if (data.code === 200) {

            this.$message({
              message: data.msg,
              type: "success",
            });
            // 保存token
            this.setCookie("name", data.data, 1 * 24 * 60 * 60 * 1000);

            getPerm().then(res=>{
              window.localStorage.setItem("userAuthList",res)

              this.$router.push("/home");
              
            })

          }
        });
      });
    },