接口封装方法及超时处理

https://www.cnblogs.com/sumu80/p/18245408

1. 安装 Axios

npm install axios

2. 创建请求模块

为了让请求在整个 Vue 项目中可复用，通常会在项目中创建一个专门的请求模块，用于配置和管理所有的 HTTP 请求。
a. 创建 http.js（或 api.js）模块
在 src 文件夹中，可以创建一个名为 http.js 的文件来配置 axios，并为不同的 API 定义请求方法。

//import VueAxios from 'axios'
import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',  // 设置基础 URL
  timeout: 5000,                      // 设置超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可以在这里添加请求头或其他信息
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;  // 添加 token
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);


// 响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    // 处理响应错误
    if (error.response && error.response.status === 401) {
      // 例如，401 错误，表示未授权，跳转到登录页等
      console.log('Unauthorized, please login');
    }
    return Promise.reject(error);
  }
);


const installer = {
      vm: {},
      install(Vue = {}) {
            Vue.use(VueAxios, service)
      }
}

export {
      // installer as VueAxios,
      instance as axios
}





const timer = setTimeout(() => {
          this.$message(new Error('请求超时'));
        }, 38000)
        postAction('/navy/dbct-catalog/ManagementModel/text/findDataPage',this.dataAssessPrams).then(rest=>{
          if(rest.data.code===200){
            
        }).catch(error=>{
          this.dataAssessLoad = false
          clearTimeout(timer)
          this.$message.warning(error)
        })

3.分开调用：

// get
const token = localStorage.getItem('token'); // 获取 token

      axios.get('/api/some-endpoint', {
        headers: {
          Authorization: `Bearer ${token}`, // 在请求中添加 token
        },
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    }

//post 上传文件

const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file); // 'file' 是后台接收文件的字段名

  axios.post('https://example.com/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data', // 告诉服务器这是一个多部分表单数据
    }
  })
  .then(response => {
    console.log('上传成功', response.data);
  })
  .catch(error => {
    console.error('上传失败', error);
  });
};

//示例：上传多个文件
const uploadFiles = (files) => {
  const formData = new FormData();

  // 遍历文件数组，将每个文件添加到 FormData
  Array.from(files).forEach((file, index) => {
    formData.append('files[]', file);  // 'files[]' 是后台接收文件的字段名
  });

  axios.post('https://example.com/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  })
  .then(response => {
    console.log('上传成功', response.data);
  })
  .catch(error => {
    console.error('上传失败', error);
  });
};


//3. 上传进度
const uploadFileWithProgress = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('https://example.com/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    onUploadProgress: (progressEvent) => {
      let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(`上传进度：${percentCompleted}%`);
    }
  })
  .then(response => {
    console.log('上传成功', response.data);
  })
  .catch(error => {
    console.error('上传失败', error);
  });
};


// 设置请求超时和错误处理
const uploadFileWithTimeout = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('https://example.com/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    timeout: 10000,  // 设置上传超时时间（单位：毫秒）
  })
  .then(response => {
    console.log('上传成功', response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('请求超时');
    } else {
      console.error('上传失败', error);
    }
  });
};

4.封装接口

import { axios } from '@/utils/request'

const api = {
      user: '/api/user',
      role: '/api/role',
      service: '/api/service',
      permission: '/api/permission',
      permissionNoPager: '/api/permission/no-pager',
}

export default api

//post
export function postActionRander(url,parameter) {
      return axios({
            url: url,
            method: 'post' ,
            params: parameter,

      })
}
//post
export function postAction(url,parameter) {
      return axios({
            url: url,
            method: 'post' ,
            data: parameter,
      })
}

// fordata的格式上传
export function postActionGetData(url,parameter) {
      return axios({
            url: url,
            method: 'post' ,
            params: parameter,
      })
}
//上传文件post请求，用params接收
export function postActionUpload(url,parameter) {
      return axios({
            url: url,
            method: 'post' ,
            data: parameter,
            headers: {
                  'Content-Type':'multipart/form-data; boundary=----WebKitFormBoundaryVCFSAonTuDbVCoAN',
            }
      })
}

//post method= {post | put}
export function httpAction(url,parameter,method) {
      return axios({
            url: url,
            method:method ,
            data: parameter
      })
}

//put
export function putAction(url,parameter) {
      return axios({
            url: url,
            method:'put',
            data: parameter
      })
}

//get
export function getAction(url,parameter) {
      return axios({
            url: url,
            method: 'get',
            params: parameter
      })
}

//deleteAction
export function deleteAction(url,parameter) {
      return axios({
            url: url,
            method: 'post',
            // method: 'delete',
            params: parameter
      })
}

export function getUserList(parameter) {
      return axios({
            url: api.user,
            method: 'get',
            params: parameter
      })
}

export function getRoleList(parameter) {
      return axios({
            url: api.role,
            method: 'get',
            params: parameter
      })
}

export function getServiceList(parameter) {
      return axios({
            url: api.service,
            method: 'get',
            params: parameter
      })
}

export function getPermissions(parameter) {
      return axios({
            url: api.permissionNoPager,
            method: 'get',
            params: parameter
      })
}

// id == 0 add     post
// id != 0 update  put
export function saveService(parameter) {
      return axios({
            url: api.service,
            method: parameter.id == 0 ? 'post' : 'put',
            data: parameter
      })
}


export function getInfo(url,parameter) {
      return axios({
            url: url,
            method: 'post',
            data: parameter,
            headers: {
                  'Content-Type': 'application/json;charset=UTF-8'
            }
      })
}

/**
 * 下载文件 用于excel导出
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
      return axios({
            url: url,
            data: parameter,
            method:'post' ,
            responseType: 'blob'
      })
}
export function getDownFile(url,parameter){
      return axios({
            url: url,
            params: parameter,
            method:'get' ,
            responseType: 'blob',
      })
}