axios及api封装

1.新建request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改
import store from '../store'  

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  /* baseURL: window.glod.baseApi, // api 的 base_url*/
  timeout: 50000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
       // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为201-206的暂时定为正确 可结合自己业务进行修改
     */
    const res = response
    if (res.status < 200 || res.status > 299) {
      Message({
        message: res.statusText,
        type: 'error',
        duration: 5 * 1000
      })

      if (res.status === 401 || res.status === 403) {
        MessageBox.confirm(
          '你已被登出，可以取消继续留在该页面，或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('oidc/signOutOidc');
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    if (error.response) {
      Message({
        message: error.response.data.error.details,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.response.data) // for debug
    } else {
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      console.log('err' + error.message) // for debug
    }
    return Promise.reject(error)
  }
)

export default service

2.新建api.js

import request from "@/utils/request";
import qs from 'qs'   //qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。npm install qs

const apis = {
  // get请求方式
  getConsumeByPhone(query) {
    return request({
      url: `/v1_consume/getConsumeByPhone`,
      method: "get",
      params: query
    });
  },

  // post请求方式
  addLeaveMessage(query) {
    return request({
      url: `/v2_leave/addLeaveMessage`,
      method: "post",
      data: qs.stringify(query),
    });
  },

  //delete请求方式
  deleteByIdCard(id) {
    return request({
      url: `/card/deleteById/${id.id}/${id.updater}`,
      method: "delete"
    });
  },

  //下面说说data数据上传

  //当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串
  // （name1 = value1 & name2=value2…），然后把这个字串append到url后面，用 ? 分割，加载这个
  // 新的url。

  getOpenId(query) {
    return request({
      url: `/v1_auth/getOpenId`,
      method: "post",
      data: qs.stringify(query),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
  },

  // data上传2
  getCode(query) {
    return request({
      headers: {
        'Content-Type': 'application/json'
      },
      url: `/v1_global/getCode`,
      method: "post",
      data: qs.stringify(query),
    });
  },
  // **当action为post时候，浏览器把form数据封装到http body中，然后发送到server。
  // 如果没有type = file的控件，用默认的application / x - www - form - urlencoded就可以了。
  // 但是如果有type = file的话，就要用到multipart / form - data了。浏览器会把整个表单以控件
  // 为单位分割，并为每个部分加上Content - Disposition(form - data或者file), Content - Type
  //   (默认为text / plain), name(控件name)等信息，并加上分割符(boundary) 。**

  upload(query) {
    return request({
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      url: `v1_global/upload`,
      method: "post",
      data: query
    });
  },
  //  data上传4
  uploadFace(query) {
    return request({
      headers: {
        'Content-Type': 'applic/v1_pFace/uploadFace'
      },
      url: `/v1_pFace/uploadFace`,
      method: "post",
      data: query
    });
  }
}

export default apis

----------------------
// 也可以分别导出再在页面中按需引入
export function getConsumeByPhone (parameter) {
    return axios({
        url: api.list,
        method: 'get',
        params: parameter
    })
}

3.在main.js中引用

import api from './api/api'

Vue.prototype.$api = api;

4.调用

 this.$api.getConsumeByPhone('123456');

基于https://blog.csdn.net/weixin_56947857/article/details/115908520修改