axios请求封装

分享我的vue项目axios请求接口统一封装

接下来是目录结构图片展示

接下来是http.js封装的是接口请求拦截和响应拦截（http.js是核心文件）

import axios from 'axios';
import { Message, MessageBox } from 'element-ui'
import store from '../../store'
import { getToken } from '@/utils/auth'
import qs from 'qs'

const service = axios.create({
  baseURL: process.env.API_PATH_DEV,
  timeout: 30000 // 请求超时时间
})
//请求拦截
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
  Promise.reject(error)
})

//响应拦截
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code == 100) {
      if (res.msg) {
      }
      return res
    } else {
      if (res.HttpStatusCode === 401 || res.HttpStatusCode === 302 || res.code == 400) {
        MessageBox.confirm("登录信息失效，请重新登录", "确认登出", {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();
          })
        })
      }
      Message({
        message: res.msg,
        type: 'error',
        duration: 5 * 1000,
        center: true
      })
      return Promise.reject(res)
    }
  },
  error => {
    if (error.message == "timeout of 30000ms exceeded") {
      Message({
        message: '请求超时',
        type: 'error',
        duration: 5 * 1000,
        center: true
      })
    }
    if (error.response.status) {
      if (error.response.status == 302) {
        MessageBox.confirm("登录信息失效，请重新登录", "确认登出", {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();
          })
        })
      }
    }
    return Promise.reject(error)
  }
)

class Http {
  get(url, params, mode) {
    const newUrl = params ? this.build(url, params) : url
    return this.request(newUrl, {
      method: 'GET'
    })
  }

  post(url, body, mode) {
    let option = {
      method: 'POST',
    }
    if (body) {
      option.body = body;
    }
    if (mode) option.mode = mode;
    return this.request(url, option)
  }

  put(url, body,mode) {
    let option = {
      method: 'PUT',
    }
    if (body) option.body = body;
    if (mode) option.mode = mode;
    return this.request(url, option)
  }

  delete(url, body,mode) {
    let option = {
      method: 'DELETE',
    }
    if (body) option.body = body;
    if (mode) option.mode = mode;
    return this.request(url, option)
  }

  patch(url, body,mode) {
    let option = {
      method: 'patch',
    }
    if (body) option.body = body;
    if (mode) option.mode = mode;
    return this.request(url, option)
  }

  build(url, params) { //get 方法调用
    const ps = []
    if (params) {
      for (let p in params) {
        if (encodeURIComponent(params[p])) {  //判断是否存在数值
          ps.push(p + '=' + encodeURIComponent(params[p]));
        }

      }
    }
    return url + '?' + ps.join('&')
  }

  request(url, option) {
    return service({
      method: option.method,
      url: url,
      data: (option.mode=='json'||option.mode=='JSON')?JSON.stringify(option.body):qs.stringify(option.body),
      headers: {
        'Content-Type': (option.mode == 'form' || option.mode == 'FORM') ? 'application/x-www-form-urlencoded' : 'application/json;charset=UTF-8',
      }
    }).then(res => {
      if (res.code === 100) {  
        return Promise.resolve(res)

      } else {
        return Promise.reject({
          message: '服务器返回错误'
        })
      }
    }).catch(err => {
      let data = {};
      if (err.response && err.response.data && err.response.data.message) {
        data = { message: err.response.data.message }
      } else if (err.message) {
        data = err.message;
      } else {
        data = { message: '未知错误' }
      };
      return Promise.reject(data);
    })
  }
}
export default new Http();

api.js是配置文件

//举几个栗子，模块js全部来自于modules下面配置的相关模块对应的接口
import SalesRankAPI from '../modules/statistics/salesRank/salesRank';//商品销售排行
import commentListAPI from '../modules/member/consultations/commentList';//评论列表相关
import OrderDetailsAPI from '../modules/finance/financialList/orderDetails'; // 订单明细表


export const SalesRank=new SalesRankAPI();//商品销售排行

export const commentList=new commentListAPI();//评论列表相关
export const OrderDetailsClient=new OrderDetailsAPI(); // 订单明细表

接下来是modules接口配置模块

举个简单的栗子：

商品销售排行

//'json'表示json格式，还有form格式，只需传入字符串即可，详细可查看http.js
import http from '@/apis/require/http';
export default class SalesRank{
  // 商品销售排行列表
  salesRankList(params){
    return http.get(`/api/i/goodsSalecont`,params,'json')
  }
  // 基本信息更新
   updateData(params){
     return http.post(`/api/i/updatebasicnew`,params,'json')
   }
   // 列表--这个接口就是form格式请求
    getList(params){
        return http.get(`/api/b/receive/detailnew`,params,'form')
    }
}

接下来详细看下vue模块页面引用

贴一下目录文件

<template>
 <div>
   <!-- 这是视图模板 -->
 </div>
</template>

<script>
import {SalesRank} from '@/apis/require/api'
export default {
 data () {
 return {
   query:{}
 }
 },
 created() {
   this.getData()
 },
 methods: {
  //  获取数据接口请求
   getData() {
      SalesRank.getList(this.query).then(res=>{
        if(res.data){
        //  接口返回成功代码
        }
      }).catch(err=>{
        console.log(err);
      })
    },
 },
}

</script>

<style lang='scss' scoped>

</style>

axios接口请求封装完成。。。