vue 后台请求 axios 封装及使用

最新推荐文章于 2024-04-20 10:08:21 发布

小点灬

最新推荐文章于 2024-04-20 10:08:21 发布

阅读量264

点赞数

分类专栏： vue axios 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/sunshine_myPG/article/details/108259258

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

1、axios请求封装

import axios from "axios";
import { IS_OK } from "./path";
import { Message, MessageBox } from "element-ui";
import Qs from "qs"

export default function request (url, data = {}, method = "GET") {
  return new Promise(resolve => {
    let promise;
    // 请求之前统一拦截，并设置请求头
    axios.interceptors.request.use(
      config => {
        if (localStorage.getItem("uid")) {
          config.headers.uid = `${localStorage.getItem("uid")}`;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      }
    );
    // 调用方法
    if (method === "GET") {
      promise = axios.get(url, {
        params: data, paramsSerializer: function (params) {
          return Qs.stringify(params, { arrayFormat: 'repeat' })
        },
      });
    } else if (method === "POST") {
      promise = axios.post(url, data);
    } else if (method === "PUT") {
      promise = axios.put(url, data);
    } else if (method === "DELETE") {
      promise = axios.delete(url, data);
    }
    // 请求成功后的统一拦截处理
    promise
      .then(res => {
        resolve(res);
        if (res.data.code !== IS_OK) {
          let msg = res.data.msg ? res.data.msg : "后台没提示";
          Message.error(msg);
        }
      })
      .catch(err => {
        console.log(err.response);
        console.log(window.$count)
        if (window.$count == 0) {
          if (err.response.status === 401) {
            MessageBox.confirm(err.response.data.msg, "系统提示", {
              confirmButtonText: "重新登录",
              showClose: false,
              showCancelButton: false,
              closeOnClickModal: false,
              type: "error"
            }).then(() => {
              document.dispatchEvent(new Event("logout"));
            });
          } else {
            Message.error(err.message);
          }
          window.$count++;
        }
      });
  });
}

2、api编写

import request from "./config";
import { API_PATH } from "./path";

export const resBaseDicNameByDicCode = data =>
  request(API_PATH + "base/dictionary/queryDicNameByDicCode", data, "GET");

3、在vue中使用

export default {
    data() {
        return {
            sexData: {}
        }
    },
    created() {
        this.getSexData();
    },
    methods: {
        async getSexData() {
            const res = await resBaseDicNameByDicCode({ dicCode: CODETYPE_SEX });
            if (res.data.code === IS_OK) {
                this.sexData = res.data.data;
            }
        }           
    }
}