一贞岭、項目

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

二做入、axios安裝

npm install axios

三缭嫡、封裝

在src/utils下新建request.js，其中ant-design-vue的全局提醒可根據(jù)項目技術替換和刪除惜颇。

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") { //開發(fā)環(huán)境
  console.log("當前環(huán)境：開發(fā)環(huán)境");
  apiUrl = "/api"
} else if (process.env.NODE_ENV === "production") {
  console.log("當前環(huán)境：生產環(huán)境");
  apiUrl = "http://**.**.**.**:****/api"  //接口地址
}
//**其他環(huán)境可以自己再根據(jù)情況增加

// 創(chuàng)建并配置axios實例
const service = axios.create({
  baseURL: apiUrl ,  //請求的url
  method: 'get',  //默認請求方式

  //   timeout: 10000, // 請求超時時間
})

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

// 添加請求攔截器
service.interceptors.request.use(
  config => {
    // 發(fā)送請求之前
    // 為頭部增加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 => {
    // 響應數(shù)據(jù)
    // 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) { //無滿足條件的數(shù)據(jù)
          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);
          });
    }
};