封装前端用的比较多的axios方法

首先引入axios

import axios from 'axios'

创建各种请求器

const axiosServer = axios.create({ //这个用于基础的请求
  baseURL: window.ApiBaseURL,
  headers: {
    'Content-Type': 'application/json-patch+json'
  },

  withCredentials: true,
  // timeout: 15000
})

const axiosServer1 = axios.create({//这个用于get请求获取下载文件
  baseURL: window.ApiBaseURL,
  headers: {
    'Content-Type': 'application/json-patch+json'
  },
 responseType: "blob",
  withCredentials: true,
  // timeout: 150000
})

const axiosServerFile = axios.create({//这个和上面的区别在于请求头不一样
  baseURL: window.ApiFileURL,
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  withCredentials: true, //跨域请求是否提供凭据
  // timeout: 15000
})

const axiosServer3 = axios.create({//用于下载zip形式的文件
  baseURL: window.ApiBaseURL,
  headers: {
    'Content-Type': 'application/json; application/octet-stream'
  },
 responseType: "blob",
  withCredentials: true,
  // timeout: 150000
})

设置一下请求拦截器

axiosServer1.interceptors.request.use(
  function(config) {
    config.headers.Token = store.state.token //添加请求头

    //请求开始时显示进度条
    // Nprogress.start()
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

axiosServer.interceptors.request.use(
  function(config) {
    config.headers.Token = store.state.token

    //请求开始时显示进度条
    // Nprogress.start()
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

axiosServer3.interceptors.request.use(
  function(config) {
    config.headers.Token = store.state.token

    //请求开始时显示进度条
    // Nprogress.start()
    return config
  },
  function(error) {
    return Promise.reject(error)
  }
)

响应拦截器

axiosServer.interceptors.response.use(
  response => {
    // console.log(response)
    if (response.data.data && response.data.data.code == 401) {
      window.opener = null
      console.log(response.data.data.msg)
      return setTimeout(() => {
        window.location.href = 'login.html'//返回登录页
      }, 2000)
    }
    if (
      response.data.type ==
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    ) {
      return response
    } else if (!response.data.ok) {
      return console.log(response.data.message)
    }

    return response
  },
  error => {
    if (error.response.status === 401) {
      // 401 说明 token 验证失败
      // 可以直接跳转到登录页面，重新登录获取 token
      //Layer提示框
      // console.log('请重新登录')
      // window.location.href = 'login.html'
    } else if (error.response.status === 500) {
      // 服务器错误
      // do something
      return Promise.reject(error.response.data)
    } else if (error.response.status === 403) {
      console.log('没有权限')
    }
    // 返回接口返回的错误信息
    return Promise.reject(error.response.data)
  }
)

封装的请求代码

export function get(url, params) {//get请求
  return new Promise((resolve, reject) => {
    axiosServer
      .get(url, {
        params: params
      })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}


export function UploadPost(url, params) {//文件系统post，用于上传文件
  return new Promise((resolve, reject) => {
    axiosServerFile({
      method: 'post',
      url: url,
      data: params,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
export function downPost(url, params) {
  return new Promise((resolve, reject) => {//文件系统post，用于下载文件
    axiosServerFile({
      method: 'post',
      url: url,
      data: params,
      responseType: 'blob'
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

//文件zip格式下载get封装
export function exportGet3(url, params) {
  return new Promise((resolve, reject) => {
    axiosServer3({
      method: 'get',
      url: url,
      params: params,
      responseType: 'blob'
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {//post请求
  return new Promise((resolve, reject) => {
    axiosServer
      .post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

//文件下载post封装
export function exportPost(url, params) {
  return new Promise((resolve, reject) => {//另一种请求头的post下载文件
    axiosServer({
      method: 'post',
      url: url,
      data: params,
      responseType: 'blob'
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
//文件下载get封装
export function exportGet(url, params) {
  return new Promise((resolve, reject) => {//get下载文件
    axiosServer({
      method: 'get',
      url: url,
      params: params,
      responseType: 'blob'
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

export function exportGet1(url, params) {//另一种get下载文件写法，axiosServer1里已经定义好响应类型为'blob'了
  return new Promise((resolve, reject) => {
    axiosServer1
      .get(url, {
        params: params,
         
      })
      .then(res => {
       
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
//文件系统get请求
export function exportGetFile(url, params) {//另一种请求头get下载文件
  return new Promise((resolve, reject) => {
    axiosServerFile({
      method: 'get',
      url: url,
      params: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
//图片上传返回Blob
export function exportGetFileBlob(url, params) {
  return new Promise((resolve, reject) => {
    axiosServerFile({
      method: 'get',
      url: url,
      params: params,
      responseType: 'blob'
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
export function delete2(url, params) {//请求头1的删除
  return new Promise((resolve, reject) => {
    axiosServer
      .delete(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}
export function Delete(url, params) {//请求头2的删除
  return new Promise((resolve, reject) => {
    axiosServerFile
      .delete(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

以上封装方法还可以进一步优化，欢迎各位补充

下面是几个jquery的封装

function encodeQuery(obj) {//用于把参数转为浏览器能识别的方法
  var arr = [];
  if (obj) {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        var value = obj[key];
        if (value != null)
          arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
      }
    }
  }
  return arr.join("&");
}
       
//设置请求头
 $.ajaxSetup({
   headers: {
     'Token':  getToken(),
  
   },
   // xhrFields: { responseType: "arraybuffer" },
   // xhrFields: { responseType: "document" }, 
      xhrFields: { responseType: "blob" }, 
 });
// 封装 jQuery 的 GET 方法
function get(url) {
  return new Promise(function(resolve, reject) {
    $.get(ApiBaseURL+url, function(data) {
      resolve(data);
    }).fail(function(error) {
      reject(error);
    });
  });
}

// 封装 jQuery 的 POST 方法
function post(url, data) {
  return new Promise(function(resolve, reject) {
    $.post(ApiBaseURL+url, data, function(response) {
      resolve(response);
    }).fail(function(error) {
      reject(error);
    });
  });
}


//方法简写
var type1={
    //code1
    code1:params=>{
        return get("api/code1/code1?"+encodeQuery(params))
    },
    //code2
       code2:params=>{
        return get("api/code2/code2?"+encodeQuery(params))
    },
   
}

//调用方法演示
type1.code1({
		pararms1:'123',
		pararms2:'456'
}).then((res)=>{
		console.log(res)
})