vue中实现axios封装

一、项目

vue项目使用@vue/cli 4.0.5搭建

二、axios安装

npm install axios

三、封装

在src/utils下新建request.js，其中ant-design-vue的全局提醒可根据项目技术替换和删除。

import axios from 'axios'  //引入axios
import {
  message
} from 'ant-design-vue';  //引入 Ant for vue 的全局消息提醒
import router from '../router'  //引入vue 路由

let apiUrl = "/api"
if (process.env.NODE_ENV === "development") { //开发环境
  console.log("当前环境：开发环境");
  apiUrl = "/api"
} else if (process.env.NODE_ENV === "production") {
  console.log("当前环境：生产环境");
  apiUrl = "http://**.**.**.**:****/api"  //接口地址
}
//**其他环境可以自己再根据情况增加

// 创建并配置axios实例
const service = axios.create({
  baseURL: apiUrl ,  //请求的url
  method: 'get',  //默认请求方式

  //   timeout: 10000, // 请求超时时间
})

// 配置ant的全局消息提醒
message.config({
  top: `100px`,  //距离顶部的距离
  duration: 2, 
  maxCount: 3,  //最大消息数量
});

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    // 发送请求之前
    // 为头部增加token
    config.headers['token'] = localStorage.getItem('token') || ""
    // 为头部增加accId
    config.headers['accId'] = localStorage.getItem("accid") || ""

    return config
  },
  error => {
    // 请求错误
    message.error("请求错误")
    return error
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    // 响应数据
    // console.log(response);
    if (response.status && response.status === 200) {
        let res = JSON.parse(response.data)
        //   console.log(res);
        if (res.result === "0") {
          return res
        } else if (res.result == -7) { //token过期
          message.warning(res.description)
          router.push({
            path: '/login'
          })
        } else if (res.result == -3) { //无满足条件的数据
          message.warning(res.description)
          return {}
        } else {
          message.warning(res.description)
        }
    } else {
      message.warning("接口请求错误：" + response.status)
    }
  },
  error => {
    // 响应错误
    message.error("服务器异常")
    console.log('err' + error) // for debug
    return error
  }
)

export default service

四、引用

在src/api下新建index.js,home.js,login.js

首页接口home.js

import request from "@/utils/request"
/**接口1**/
export function getindexCard(str) {
  return request({
    url: '/Stat/StatUseP_Today' + str,
  })
}
/**接口2**/
export function getUseEleTrend(str) {
  return request({
    url: '/Stat/StatDayCurve_UseP' + str,
  })
}
/**接口3**/
export function getDayPowerCurve(str) {
  return request({
    url: '/Stat/StatDayCurve_Watts' + str,
  })
}

登录接口login.js

import request from "@/utils/request"
export function getLogin(data) {
  return request({
    url: '/Login/GereralLogin',
    method: 'post',
    data: data
  })
}

接口汇总index.js

//登陆 login.js
export { getLogin } from "./login"
// 首页 home.js
export {
  getindexCard,
  getUseEleTrend,
  getDayPowerCurve,
}
from "./home"

五、使用接口

在具体页面通过"@/api"引入需要的接口即可，@代表根目录下的src目录。

在views/home/index.vue使用home.js内的getindexCard接口：

import { getindexCard } from "@/api";
export default {
    mounted() {
        getindexCard(params).then(res => {
              console.log(res);
          });
    }
};

在views/login/index.vue使用login.js内的getLogin接口：

import { getLogin} from "@/api";
export default {
    mounted() {
        getLogin({ AccId: "admin", Pwd: "123456" }).then(res => {
              console.log(res);
          });
    }
};