vue axios封装方法

创建个request.js 文件

import axios from "axios";
import { throwErr } from "../utils"; //utils 捕捉服务端http状态码的方法
import store from "@/store"; //引入vuex的相关操作
// eslint-disable-next-line no-unused-vars
import router from "@/router";

//过滤请求
axios.interceptors.request.use(
  config => {
    //config 为请求的一些配置 例如：请求头 请求时间 Token  可以根据自己的项目需求个性化配置，参考axios的中文说明手册  自己多动动手
    config.timeout = 10 * 1000; //请求响应时间
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.code === 0) {
      //服务端定义的响应code码为0时请求成功
      return Promise.resolve(response.data);
      //使用Promise.resolve 正常响应
    } else if (response.data.code === 1401) {
      //服务端定义的响应code码为1401时为未登录
      store.dispatch("setUserInfo", {});
      Message({
        message: "未登录"
      });
      // router.push('/login')
      return Promise.reject(response.data); //使用Promise.reject 抛出错误和异常
    } else {
      return Promise.reject(response.data);
    }
  },
  error => {
    if (error && error.response) {
      let res = {};
      res.code = error.response.status;
      res.msg = throwErr(error.response.status, error.response); //throwErr 捕捉服务端的http状态码 定义在utils工具类的方法
      return Promise.reject(res);
    }
    return Promise.reject(error);
  }
);
export default function request(method, url, data) {
  //暴露 request 给我们好API 管理
  method = method.toLocaleLowerCase(); //封装RESTful API的各种请求方式 以 post get delete为例
  if (method === "post") {
    return axios.post(url, data); //axios的post 默认转化为json格式
  } else if (method === "get") {
    return axios.get(url, {
      params: data
    });
  } else if (method === "delete") {
    return axios.delete(url, {
      params: data
    });
  }
}

继续创建个http.js文件，引入request.js文件

import request from "./request"; //引入axios的封装方法
const api = 'http://192.168.1.20:8765/apis'
export const loginRequest = params => {
  return request("post", api + "/user/pc/api/user/login/password", params); //登陆管理员获取自身信息
};


export const register = params => {
  return request("post", api + "/system/pc/menu/user/list", params); //获取菜单
};


export const deleteAdmin = (id, params) => {
  return request("delete", api + `/api/v1.0/admin/${id}`, params); //更新管理员信息
};

最后在项目组件中使用就可以啦
引入接口方法

import { loginRequest, regi } from '@/api/http.js'

然后就可以使用啦

methods: {
    async tok () {
      let res = await regi()
      console.log(res)
    },
    async login () {
      let obj = {
        clientId: "lkb65617f842ad4c37895a733b8de43cbb",
        ip: "127.0.0.0",
        mobile: this.user,
        password: this.password
      }
      let res = await loginRequest(obj)
      if (res.code === 200) {
        this.$router.push('/about')
        this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        })
        storage.set('userInfo', res.data)
      }
      console.log(res)
    }
  }