axios二次封装成promise,并且区分各种不同参数格式，json,键值对，文件格式。接受文件流等设置。配合跨越代理下开发和生产环境不同url配置，并有promise链式调用等参考。

 //封装代码http.js
/*
 * @Author: Mr Dong
 * @Date: 2022-03-08
 * @LastEditTime: 2022-03-09 
 * @LastEditors: Mr Dong
 */
import Vue from 'vue';
import axios from 'axios';
import qs from 'querystring'//序列化参数用


//决定是否过滤URL中的/api
let isFilterApi = !(process.env.NODE_ENV === 'development'); //线上环境还是本地环境,过滤/api
let _axios = axios.create({
  baseURL: '',
  withCredentials:true,//跨域请求时开启请求头可以携带cookie等信息
  timeout: 300000, //超时设置
  transformRequest: [function (data) {
    return data
  }],//处理请求格式用（这里不能少，否则content-type设置成multipart/form-data无效，具体原因未知）
  transformResponse: [function (data) {
    return data
  }]//处理返回格式用例如_axios.defaults.responseType = 'blob';
})
// 请求拦截器（如果不单独封装成多种单独的请求格式，判断将写在请求拦截中，自行考虑选用方式，个人觉得判断太多不如单独写）
_axios.interceptors.request.use(
  (config) => {
    return config
  }, // 发送请求前做的配置
  error => {  //请求错误处理
    Promise.reject(error)
}
);
// 响应拦截器
_axios.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject(error), // 对请求错误做点什么
);
_axios.defaults.headers.common['Token'] = '1111'//token设置
//过滤/api
function filterApi(url) {
  url = isFilterApi? url:'/api'+url//跨域代理,开发环境自动添加'/api'
  return url
}
//通用请求错误提示
function _error(err){
  switch (Number(err.response.status)) {//这里字段根据自己项目修改
    case 400://一般是前台参数格式有问题
    Vue.prototype.$message({
            type: 'warning',
            showClose: true,
            message: '请求无效！'
        });
        break;
    case 404:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '未找到该接口'
        });
        break;
    case 500:
      Vue.prototype.$message({
            type: 'error',
            showClose: true,
            message: '服务器异常',
        });
        break;
}
}

//json格式post
export const JsonPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  delete _axios.defaults.responseType
  _axios.post(url, JSON.stringify(params)).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//键值对格式post
export const FormDataPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
  delete _axios.defaults.responseType
  _axios.post(url, qs.stringify(params)).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//文件格式post，上传图片，文件等
export const FilePost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
  delete _axios.defaults.responseType
  _axios.post(url, params).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//返回格式为文件流，如导出excle文件流。
export const BlobPost = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  _axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
  _axios.defaults.responseType = 'blob';
  _axios.post(url, JSON.stringify(params)).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//get请求，这里注意和axios.get和axios.post请求参数格式的区别写法post{},get{params:{}}
export const get = (url, params) => new Promise((resolve, reject) => {
  url = filterApi(url)
  delete _axios.defaults.responseType
  _axios.get(url, { params }).then((res) => {
    resolve(res.data);
  }).catch((err) => {
    _error(err)//通用错误提示
    reject(err.data);//特定界面错误处理
  });
});
//第一种写法
//axios({method:'post',url:'',data:{}}
//axios({method:'get',url:'',params:{}})
//第二种写法，这里用的是第二种
//axios.get(url,{params:{}})
//axios.post(url,data:{})
//第三种写法不区分参数格式只用post格式，单独手动处理get的url，即手动序列化参数拼接到url后面。不提倡，序列化放法可采用qs.stringify()或者自己写方法

//分模块使用,home.js
/*
 * @Author: Mr Dong
 * @Date: 2022-03-09
 * @LastEditTime: 2022-03-09 
 * @LastEditors: Mr Dong
 */
import { get, JsonPost, FormDataPost, FilePost, BlobPost } from '../http';


// 测试请求一，注意加入'/api'，用了跨域代理的方式
export const _JsonPost = (params = {}) => JsonPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _FormDataPost = (params = {}) => FormDataPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _FilePost = (params = {}) => FilePost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _BlobPost = (params = {}) => BlobPost('/sc-prevention/process/queryWorkOrderInfo', params);
export const _get = (params = {}) => get('/sc-prevention/process/queryWorkOrderInfo', params);

//各模块统一导出index.js
/*
 * @Author: Mr Dong
 * @Date: 2022-03-18 
 * @LastEditTime: 2022-03-09 
 * @LastEditors: Mr Dong
 */
import * as home from './home/index';
export {
    home
}

//页面引入并使用
import {home} from '../api/api_type2/index'
//测试get请求
      home._get({name:'测试',age:29}).then(res=>{
         console.log(res)
      }).catch(err=>{
        alert('get请求失败')//特定错误处理
      })
     //测试post请求
      home._JsonPost({name:'测试',age:29}).then(res=>{
      })
      home._FormDataPost({name:'测试',age:29}).then(res=>{
        console.log(res)
      })
       home._FilePost({name:'测试',age:29}).then(res=>{
         console.log(res)
       })
      home._BlobPost({name:'测试',age:29}).then(res=>{
        console.log(res)
      })
      //接口链式调用测试,放在catch中，是因为这里测试是假接口只能走到catch，正常开发自然是then
     home._get({name:'测试',age:29}).then(res=>{
      // return home._JsonPost(res.data)

     }).catch(err=>{
      
      return home._JsonPost({name:'测试',age:29})
     }).then(res=>{
      //  return home._FormDataPost(res.data)
      
     }).catch(err=>{
       return home._FormDataPost({name:'测试',age:29})
     }).then(res=>{
      //  return  home._FilePost(res.data)
       
     }).catch(err=>{
       return  home._FilePost({name:'测试',age:29})
     }).then(res=>{
      //  return home._BlobPost(res.data)

     }).catch(err=>{
       return home._BlobPost({name:'测试',age:29})
     })
     //promise.all测试,注意参数要是promise实例对象
     Promise.all([home._get({name:'测试',age:29}),home._JsonPost({name:'测试',age:29})]).then(res=>{

     }).catch(err=>{
       console.log('all测试')
     })

目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e8ffdea5a8f45349469ddc55f36f6ea.png#pic_center)