vue中封装axios

安装axios

npm install axios --save

封装axios

// 引入axios 和 qs
import axios from "axios";
import qs from "qs";
// 引入路由
import router from "../router";
// 引入弹框组件
import { Message } from "element-ui";
// 引入local
import local from "@/utils/local";
// 统一配置
axios.defaults.baseURL = "http://127.0.0.1:5000";
axios.defaults.timeouts = 5000;//响应时间

// 请求拦截器（在每一个请求头部添加token）
axios.interceptors.request.use(config => {
  // 请求头携带token（local是封装的本地存储方法）
  config.headers.Authorization = `Bearer ` + local.get("t_k");
  // config.headers.Authorization =  local.get("t_k");
  return config;
});

// 响应拦截器（拦截每一次相应判断并弹出返回的msg且判断登录是否过期）
axios.interceptors.response.use(
  res => {
    if (res) {
      // 如果响应的数据含有code字段和msg字段
      if (
        res.data !== undefined &&
        res.data.code !== undefined &&
        res.data.msg !== undefined
      ) {
        // 解构出来
        let { code, msg } = res.data;
        // 如果成功 弹出成功提示
        if (code === 0) {
          Message({
            type: "success",
            message: msg
          });
        } else if (code === 1) {
          Message.error(msg); // 失败 弹出失败提示
        }
      }
      return res;
    }
  },
  err => {
    if (err.response.data.code === 401) {
      Message.error("无效的token，请重新登录");
      // 错误跳转到登录页
      router.push("/login");
    }
  }
);
// 暴露
export default {
  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios
        .get(url, {
          params
        })
        .then(res => {
          if (res) {
            resolve(res.data); // 成功
          }
        })
        .catch(err => {
          reject(err); //失败
        });
    });
  },
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios
        .post(url, qs.stringify(params))
        .then(res => {
          if (res) {
            resolve(res.data); // 成功
          }
        })
        .catch(err => {
          reject(err); // 失败
        });
    });
  }
};

三层封装

//引入封装好的axios
import req from "@/utils/request";
/*
@params 传入的参数
@return 抓取
*/
export const addAcc = (params) => {return req.post("/users/accountadd", params)};

页面中使用

//引入
import { addAcc } from "../../api/shop.js";

//在方法中使用
addAcc.then(res=>{
console.log(res)
})