vue项目封装axios

先看一下 我们的结构：

---

第一阶段 配置：

api文件夹说明
api文件夹存放接口

user.js

import request from "../utils/request";

//保存游戏类型
export function saveGame(data) {
  return request({
    url: "/user-setting/xxxx",
    method: "post",
    data
  });
}

//获取游戏类型
export function getGame(data) {
  return request({
    url: "/user-setting/xxxxx",
    method: "get",
    data
  });
}

这里我们引入了，utils文件夹下的request.js

utils文件夹说明*
utils文件夹存放工具文件

request.js

首先需要安装axios，和qs，以及 ant-design-vue(也可以别的UI库 或者 不是使用也行)

import axios from "axios";
import qs from "qs";
import { getToken } from "../utils/auth";
import Message from "ant-design-vue/es/message";

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  withCredentials: true,
  timeout: 5000,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
});

// 请求拦截
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (config.method === "post" || config.method === "put") {
      config.data = qs.stringify(config.data);
    }
    if (config.method === "get") {
      config.url = config.url + "?" + qs.stringify(config.data);
    }
    // if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    // config.headers['X-Token'] = getToken()
    // Cookie: APPMGRID=5dcf8572f7c74ee28309b3ff67063686
    if (getToken()) {
      config.headers["token"] = getToken();  //这里换成你的token名字
    }
    // }
    return config;
  },
  error => {
    // do something with request error
    console.log(error);
    return Promise.reject(error);
  }
);

// 响应拦截
service.interceptors.response.use(
  response => {
    const data = response.data;
    switch (data.code) {
      case 0:
        return Promise.resolve(data);
      case 301:
        Message.warn(data.msg || "请先登录");
        break;
      case 400:
        Message.warn(data.message || res.data.msg || "资源不在收藏列表中");
        break;
      case 401:
        Message.error(data.msg || "请先登录");
        break;
      case 403:
        Message.error(data.msg || "权限不足");
        break;
      case 404:
        Message.error(data.msg || "请求资源不存在");
        break;
      case 408:
        Message.error(data.message || "已经收藏过该视频");
        break;
      case 500:
        Message.error(data.msg || "服务器开小差啦");
        break;
      case 504:
        Message.error(data.msg || "网络请求失败");
        break;
      default:
        Message.error(data.msg || "请求失败");
    }
  },
  error => {
    console.log("err" + error);
    // Message({
    //   message: error.message,
    //   type: 'error',
    //   duration: 5 * 1000
    // })
    return Promise.reject(error);
  }
);

export default service;

上述代码引入了，getToken ，这里主要是auth.js 中设置的，主要作用是在 完成登录后，后面的请求 都在头部添加上token。

---

auth.js
需要安装 js-cookie

import Cookies from "js-cookie";

const TokenKey = "token";  //这里是你的token名
const UseridKey = "USERID";

export function getToken() {
  return Cookies.get(TokenKey);
}

export function setToken(token) {
  return Cookies.set(TokenKey, token);
}

export function removeToken() {
  return Cookies.remove(TokenKey);
}

export function getUserid() {
  return Cookies.get(UseridKey);
}

export function setUserid(Userid) {
  return Cookies.set(UseridKey, Userid);
}

export function removeUserid() {
  return Cookies.remove(UseridKey);
}

---

第二阶段 使用：

store主要用于数据处理：

index.js

import Vue from "vue";
import Vuex from "vuex";
import state from "./state";
import mutations from "./mutations";
import getters from "./getters";
import user from './modules/user'; //用户信息
import app from './modules/app';  //离线数据库

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  getters,
  mutations,
  modules:{
    user:user,
    app:app
  }
});

user.js

import {
  saveGame,
  getGame,
} from "../../api/user.js";

let state = {
  gameType: "",
  userInfos: ""
};
let getters = {
  userId: state =>
    (Object.keys(state.userInfo).length > 0 && state.userInfo.profile.userId) ||
    "",
  userPlaylists: state => state.userPlaylists,
  createdList: state => {
    return state.userPlaylists.filter(item => {
      return !item.subscribed;
    });
  },
  likedPlaylistIds: state => state.userPlaylists.map(item => item.id),
  likedsongIds: state => state.likedsongIds
};

let mutations = {
  SET_USER_INFOS(state, data) {
    state.userInfos = data.data;
  },
  SET_GAME_TYPE(state, data) {
    state.gameType = data;
  }
};

let actions = {
  GET_USER_INFO({ commit }, data) {
    getGame({}).then(data => {
      commit("SET_USER_INFOS", data);
    });
  },
  CHOOSE_GAME({ commit }, data) {
    let postData = {
      game_abbr: data
    };
    saveGame(postData).then(data => {
      commit("SET_GAME_TYPE", data);
    });
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

---

在项目中使用，例如这里的的保存游戏，去调用一个接口：

当单机确定的时候，去发送请求

choose_game.vue

<template>
  <div class="choose-game">
    <div class="m-t">
      <div class="header">请选择您常用的游戏</div>
      <div class="determine">
        <a href="#" class="animBtn themeA" @click="close">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "ChooseGame",
  data() {
    return {
      choose: false,
      type: "csgo"
    };
  },
  methods: {
    ...mapActions("user", ["CHOOSE_GAME"]), //调引入mapActions 里面的接口
    close() {
      this.showDial = false;
      this.CHOOSE_GAME(this.type).then(rev => {}); //调用接口
    }
  }
};
</script>

---

第三阶段 配置环境：

这里有两种环境，开发 和生产环境

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'https://test/xxxxxxx.csgo.com/'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

---

.env.production

# just a flag
ENV = 'production'

# base api
#VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'https://xxxxxxx.csgo.com/'