基于axios封装2

一、下载axios插件

npm install axios -S

二、利用promise封装一个http请求（http.js）

import axios from "axios";
import api from "./api"; //请求前缀的地址
import router from "@/router";
import { Message } from "element-ui";
// import store from "@/store/index";
import store from "../store/store";
import qs from "qs";

const axiosHttp = axios.create({
  baseURL: api.baseUrl
  // timeout: 3000,
  // headers: {
  //     'token':
  //     window.localStorage.csmpToken
  // }
});
//添加请求拦截器
axiosHttp.interceptors.request.use(
  config => {
    if (config.method == "post") {
      config.headers = {
        "content-type": "application/x-www-form-urlencoded"
      };
      console.log(config.data);
      config.data = qs.stringify(config.data);  //解决后台接收数据格式的问题
    }
    
    if (window.localStorage.Token)
      config.headers.access_token = window.localStorage.Token; //localstorage获取token
    // config.headers.token = window.localStorage.Token; //localstorage获取token
    //在发送请求之前做某事
    return config;
  },
  error => {
    //请求错误时做些事
    return Promise.reject(error);
  }
);

//添加响应拦截器
axiosHttp.interceptors.response.use(
    // if (response.headers.token)
    //   window.localStorage.csmpToken = response.headers.token;
  response => {
    // if (response.headers.token)
      // window.localStorage.csmpToken = response.headers.token;
    if (response.data.code === 0) {
      // return new Promise((resolve,reject) => {
      // 	resolve(response.data.body)
      // })
      if (
      
      // 判断当进行修改(sava和update是增删改的接口)的时候进行提示，如果只是简单的查询就没有提示
        response.config.url.indexOf("save") > -1 ||
        response.config.url.indexOf("update") > -1
      ) {
        Message({
          showClose: true,
          message: "操作成功",
          type: "success",
          duration: 2000
        });
      }
      return response.data.body;
    } else if (response.data.rsltcode == 0) {
      Message({
        showClose: true,
        message: "操作成功",
        type: "success",
        duration: 2000
      });
      return response.data.access_token;
    } else {
      if (response.data.code === 1) {
        if (response.data.msg) {
          Message({
            showClose: true,
            message: response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      } else if (response.data.code === 500) {
        if (
          response.config.url.indexOf("system/menu/getallmenu") > -1 ||
          response.config.url.indexOf("/auth/oauth/token") > -1
        )
          window.localStorage.removeItem("csmpToken");
        // router.replace({
        //     path: '/login'
        // });
      }
      return new Promise((resolve, reject) => {
        reject({ code: response.data.code, msg: response.data.msg });
      });
    }
  },
  error => {
    if (error.response) {
      if (error.response.data.code === 401) {
        Message({
          showClose: true,
          message: "登录超时",
          type: "error",
          duration: 2000
        });
        window.localStorage.removeItem("csmpToken");
        store.state.menuList = [];
        router.replace({
          path: "/login",
          query: {
            redirect: window.location.href.split("/#/")[1].split("?")[0]
          } //登录成功后跳入浏览的当前页面
        });
      }
      return Promise.reject(error.response.data); // 返回接口返回的错误信息
    } else {
      return Promise.reject(error); // 返回接口返回的错误信息
    }
  }
);

export default axiosHttp;

三 api.js 地址前缀

export default {
  // baseUrl: "http://172.16.1.1:9008", //卢旭
  fileserver: "http://172.16.1.0:8767/"
};

四 main.js

import axiosHttp from "../src/libs/axiosHttp.js";
Vue.prototype.axiosHttp = axiosHttp;
我这里是吧请求直接挂载在vue.protype上了，以便于可以直接this调用

五 页面中的使用以及get、post区别使用

get请求:
      // 获取表格数据
      getTableList() {
        var obj = {
          pageIndex: 1,
          size: 10
        };
        //为了跟后盾接收参数保持一致，所以用params包裹一层对象
        this.axiosHttp
          .get("/slNewEleviewPro/codingMake", { params: obj })
          .then(res => {
            this.tableList = res.data;
            this.page=res.params,
            this.size=res.pageSize
          });
      },
 post请求:
         var obj = {
          pageIndex: 1,
          size: 10
        };
        this.axiosHttp
          .post("/slNewEleviewPro/codingMake", obj)
          .then(res => {
            this.tableList = res.data;
            this.page=res.params,
            this.size=res.pageSize
          });
          ```