axios 請求二次封裝

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}


/**
 * 封裝post請求
 * @param url
 * @param params
 * @returns {Promise}
 */

//  Form Data
//  headers: {
//    "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
//  }

// Form Data   Request payload
//當headers為 json時是 request 方式發送請求    但是如果你們的后台是formData的方式接口 就傳一個header進來 就可以 formData  需要qs序列化
//因為我們后台是json接受的比較多 所以json在我這里是默認  可以根據自己的情況修改   這個需要json轉字符串不然是亂碼的

export function post(url, params = {}, headers) {
  return new Promise((resolve, reject) => {
    if (headers == undefined) {
      axios.post(url, JSON.stringify(params), {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err.data)
        })
    } else {
      axios.post(url, QS.stringify(params), headers)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err.data)
        })
    }

  });
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

 

 

main.js中 

import {
  post,
  get,
  patch,
  put,
} from './assets/utils/http'


//定義全局變量
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

 使用

this.$get("/role/getAllRole",{}).then(res => {});

this.$post("/judge/editJudgeInfoRole", {
        oid: this.rowData.oid,
        roleid: this.roleid
      }).then(res => {});

攔截

全部代碼

import axios from 'axios'
import QS from "qs"
import store from "@/store/index"
import router from '@/router/index'
import { mapState, mapMutations } from "vuex";
import {
  Message
} from 'element-ui';
axios.defaults.timeout = 10000;
axios.defaults.baseURL = process.env.API_ROOT;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.headers.common['Authorization'] = store.state.token ? store.state.token : localStorage.token;

axios.interceptors.request.use(
  config => {
    config.headers = {
      'Authorization': store.state.token ? store.state.token : localStorage.token
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 攔截器
axios.interceptors.response.use(
  response => {
    

  },
  error => {
    return Promise.reject(error)
  }
)