axios另类封装

import axios from 'axios'
import {
  bus
} from '../bus.js'

axios.defaults.withCredentials = true;
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
// axios.defaults.headers.post['Content-Type'] =  'application/x-www-form-urlencoded'

//添加一个请求拦截器
axios.interceptors.request.use(
  config => {
    if (window.localStorage.getItem('access-token')) {
      config.headers.Authorization = window.localStorage.getItem('access-token');
    }
    store.state.loading = true
    return config
  },
  error => {
    return Promise.reject(error)
  }
);
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
  store.state.loading = false
  if (response.data && response.data.code) {
    if (parseInt(response.data.code) === 401) {
      //未登录
      bus.$emit('goto', '/login')
    }
  }

  return response;
}, function (error) {
  store.state.loading = false
  // Do something with response error
  return Promise.reject(error);
});

//基地址
let base = process.env.API_ROOT


//通用方法
export const POST = (url, params) => {
  return axios.post(`${base}${url}`, params).then(res => res.data)
}

//上传
export const POST_UPLOAD_FILE = (url, params) => {
  var instance = axios.create({
    baseURL: `${base}`,
    timeout: 5000,
    headers: { "Content-Type": "multipart/form-data" }
  });
  return instance.post(`${url}`, params).then(res => res.data);
}


//登录
export const POST_LOGIN = (url, params) => {
  var instance = axios.create({
    baseURL: `${base}`,
    timeout: 5000,
    headers: { 'Content-Type': 'application/json; charset=utf-8' }
  })
  return instance.post(`${url}`, params).then(res => res.data);
}

export const GET = (url, params) => {
  return axios.get(`${base}${url}`, {
    params: params
  }).then(res => res.data)
}

export const GETByConfig = (url, params) => {
  return axios.get(`${base}${url}`,
    params).then(res => res)
}

export const PUTByConfig = (url, params,config) => {
  return axios.put(`${base}${url}`,
    params,config).then(res => res)
}
export const PUT = (url, params) => {
  return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
  return axios.delete(`${base}${url}`, {
    params: params
  }).then(res => res.data)
}

export const PATCH = (url, params) => {
  return axios.patch(`${base}${url}`, params).then(res => res.data)
}

API编写【根据请求地址不同,进行归类】:

import * as API from './'

export default{
getData:params=>{ return API.GET("后台给的请求地址", params) }

login: params => {
return API.POST_LOGIN('/api-admin/oauth/token?'+ params)
},
API.GET("/admin/system/a16SysDict/getInfoByType/" + type)
return API.GET("/admin/system/permission/getPermisssList?id=" + id)
getPermisssList: id => {
return API.GET("/admin/system/permission/getPermisssList?id=" + id)
},

getData:id=>{
    return API.GET("后台给的请求地址/" + id)
  }
 }

使用:

import API from  “API地址"

testGetData(){
    let params  = {};
    API.getData(params).then(result=>{
        if(result.code === 0){
         //代码块
}
    },
    err=>{
       this.$message.error({
            message: err.toString(),
            duration: 2000
          });
    }
).catch(error=>{
  this.$message.error({
          message: "请求出现异常",
          duration: 2000
        });
})
}

  

原文地址:https://www.cnblogs.com/0520euv/p/12182987.html