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