vue封装axios的方式

Posted 2023-06-17 Cxymds

vue封装axios的方式（三）

与第二种封装基本相同，不同之处在于api的处理格式

// 引入axios
import axios from \'axios\'
// 引入qs模块，对数据进行序列化
import QS from \'qs\'
// 引入message模块，toast提示
import  message  from \'ant-design-vue\'
// 引入storage模块，操作token
import  session  from \'@/utils/storage.js\'

// 请求超时时间
axios.defaults.timeout = 10000

// 请求拦截器
axios.interceptors.request.use(
  config => 
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = session.get(\'Token\')
    token && (config.headers.Authorization = token)
    if(config.method.toUpperCase() === \'POST\') 
      config.headers[\'Content-Type\'] = \'application/json;charset=utf-8\'
    
    return config
  ,
  error => 
    return Promise.error(error)
  )
// 响应拦截器
axios.interceptors.response.use(
  response => 
    console.log(response)
    if (response.status === 200) 
      return Promise.resolve(response)
     else 
      return Promise.reject(response)
    
  ,
  // 服务器状态码不是200的情况
  error => 
    if (error.response.status) 
      switch (error.response.status) 
        case 500:
          message.error(\'网错错误，请稍后再试！\')
          break
        case 404:
          message.error(\'网错错误，请稍后再试！\')
          break
        // 其他错误，直接抛出错误提示
        default:
          message.error(error.response.data.message)
      
      return Promise.reject(error.response)
    
  
)

/**
 * get方法，对应get请求
 * @param String url [请求的url地址]
 * @param Object params [请求时携带的参数]
 */
export function get(url, params) 
  return new Promise((resolve, reject) =>
    axios.get(url, 
      params: params
    )
      .then(res => 
        resolve(res.data)
      )
      .catch(err => 
        reject(err.data)
      )
  )

/**
* post方法，对应post请求
* @param String url [请求的url地址]
* @param Object params [请求时携带的参数]
*/
export function post(url, params) 
  return new Promise((resolve, reject) => 
    axios.post(url, QS.stringify(params))
      .then(res => 
        resolve(res.data)
      )
      .catch(err => 
        reject(err.data)
      )
  )

/**
 * get方法，对应get请求,直接在地址后面拼串的形式
 * @param String url [请求的url地址]
 * @param String params [请求时携带的参数]
 */
export function getDynamicynamic(url, params) 
  return new Promise((resolve, reject) =>
    const completeUrl = `$url/$params`
    axios.get(completeUrl, )
      .then(res => 
        resolve(res.data)
      )
      .catch(err => 
        reject(err.data)
      )
  )

/**
 * post方法，导出文件
 * @param String url [请求的url地址]
 * @param String params [请求时携带的参数]
 */
export function getFileUseBlobByPost(url, params = ) 
	return new promise((resolve, reject)=> 
		axios(
	      method: \'post\',
	      url,
	      data: params,
	      responseType: \'blob\'
	    )
	      .then(res => 
	        resolve(res)
	      )
	      .catch(err => 
	        reject(err.data)
	      )
		)

创建单独的api模块

import  get, post, getDynamicynamic, getFileUseBlobByPost  from \'./http\'

export const testPostApi = p => post(\'test1/api/login\', p)

export const testGetDynamicApi = p => getDynamicynamic(\'test3/api/getnew\', p)

export const testGetApi = p => get(\'demo2/api/goods\', p)

export const testExportApi = p => getFileUseBlobByPost(\'demo1/api/export\', p)

页面中的使用

<script setup >
import  onMounted  from \'vue\'
import  testPostApi, testGetApi, testGetDynamicApi  from \'@/request/api.js\'

const testPostFun = async () => 
  const res = await testPostApi( username: \'admin\', password: \'admin\' )
  console.log(res)

const testGetFun = async () => 
  const res = await testGetApi()
  console.log(res)

const testGetDynamicFun = async () => 
  const res = await testGetDynamicApi(\'15\')
  console.log(res)

const testexportFun = async () => 
  const res = await testExportApi()
  console.log(res)
  const fileName = decodeURIComponent(res.headers[\'content-disposition\'].split(\';\')[1]).split(\'=\')[1].split(\'"\')[1]
  let url = window.URL.createObjectURL(new Blob([res.data]))
  let a = document.createElement(\'a\')
  a.style.display = \'none\'
  a.href = url
  a.setAttribute(\'download\', fileName)
  document.body.appendChild(a)
  a.click() //执行下载
  window.URL.revokeObjectURL(a.href) //释放url
  document.body.removeChild(a) //释放标签

onMounted(() => 
  testPostFun()
  testGetFun()
  testGetDynamicFun()
  testexportFun()
)
</script>

vue.config.js的参考配置

const  defineConfig  = require(\'@vue/cli-service\')
module.exports = defineConfig(
  transpileDependencies: true,
  devServer: 
    proxy: 
      \'/test1\': 
        target: \'http://www.liulongbin.top:3007/\',
        pathRewrite:  \'^/test1\': \'\' ,
        ws: false,
        changeOrigin: true
      ,
      \'/demo2\': 
        target: \'https://www.escook.cn/\',
        pathRewrite:  \'^/demo2\': \'\' ,
        ws: false,
        changeOrigin: true
      ,
      \'/test3\': 
        target: \'http://www.liulongbin.top:3005/\',
        pathRewrite:  \'^/test3\': \'\' ,
        ws: false,
        changeOrigin: true
      
    
  
)