快捷導(dǎo)航

vue+ts封裝axios網(wǎng)絡(luò)請求封裝方式

更新時間：2025年12月06日 08:41:19 作者：仰望星空下的自己

文章介紹了如何使用Vue和TypeScript封裝Axios網(wǎng)絡(luò)請求,并提供了一個示例文件`request.ts`,展示了如何封裝各種請求,此外,還提到了路由管理文件和狀態(tài)碼處理文件的結(jié)構(gòu)

vue+ts封裝axios網(wǎng)絡(luò)請求封裝

request.ts 文件

import axios from 'axios';
import router from '@/router';
import StatusInit from '@/utils/status/StatusInit' // 狀態(tài)碼的策略模式

const CancelToken: any = axios.CancelToken; // axios 的取消請求

let token = localStorage.getItem('token');

const service = axios.create({
  baseURL: '', // 可以不需要
  timeout: 5000,  // 超時時間
  withCredentials: true,
  headers: {
    'version': '1.0.1', // 接口的版本號
    'Authorization': 'Bearer ' + token, // 向后臺發(fā)送的token
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  },
  validateStatus () {
    return true;
  },

});

// 防止重復(fù)提交 利用axios的cancelToken
let pending: any[] = []; // 聲明一個數(shù)組用于存儲每個ajax請求的取消函數(shù)和ajax標(biāo)識

/**
 * 取消重復(fù)請求
 * @param config
 * @param f
 */
const removePending: any = (config: any, f: any) => {
  const flgUrl = config.url;
  if ( pending.indexOf(flgUrl) !== -1 ) {
    if ( f ) {
      f('取消重復(fù)請求');
    } else {
      pending.splice(pending.indexOf( flgUrl ), 1); // 刪除記錄
    }
  } else {
    if ( f ) {
      pending.push( flgUrl );
    }
  }
}

/**
 * 請求攔截器
 */
service.interceptors.request.use(
  (config: any) => {
    if ( !config.neverCancel ) {
      // 生成canalToken
      config.cancelToken = new CancelToken((c: any) => {
        removePending(config, c);
      });
    }
    // 添加請求頭以及其他邏輯處理
    return config;
  },
  (error: any) => {
    Promise.resolve(error);
  }
);

/**
 * 響應(yīng)攔截器
 */
service.interceptors.response.use(
  (response: any) => {
    removePending( response.config );
    const res = response.data;
    // 后端status錯誤判斷
    if ( res.status === 200 ) {
      let status = new StatusInit();
      status.init(res.status, res.msg, res);
      return Promise.resolve(res);
    } else {
      // 錯誤狀態(tài)碼處理
      return Promise.reject(res);
    }
  },
  (error: any) => {
    // Http錯誤狀態(tài)碼處理
    return Promise.reject(error);
  }
);


export default service;

各種請求的分裝

import request from '../request/request';

/**
 * 封裝get請求
 * @param {string} url 請求連接
 * @param {Object} params 請求參數(shù)
 * @param {Object} header 請求需要設(shè)置的header頭
 */
export const get = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'get',
    params: params,
    headers: header
  });
}

/**
 * 封裝post請求
 * @param {string} url 請求連接
 * @param {Object} params 請求參數(shù)
 * @param {Object} header 請求的header頭
 */
export const post = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'post',
    data: params,
    headers: header
  });
}

/**
 * 封裝put請求
 * @param {string} url 請求連接
 * @param {Object} params 請求參數(shù)
 * @param {Object} header 請求設(shè)置的header頭
 */
export const put = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'put',
    data: params,
    headers: header
  });
}

/**
 * 封裝delete請求
 * @param {string} url 請求連接
 * @param {Object} params 請求參數(shù)
 * @param {Object} header 請求設(shè)置的header頭
 */
export const del = (url: string, params: object, header: {}) => {
  return request({
    url: url,
    method: 'delete',
    data: params,
    headers: header
  });
}

路由管理文件在這里可以寫自己的路由信息

eg：

登錄的路由 const login = ‘login’;

在module.exports 里面添加 login: login

const baseUrl = ''; //域名
const index = 'index'; // 首頁路由

export default {
  baseUrl: baseUrl,
  index: index
}

請求以及接口路由調(diào)用文件

import {get, post, put, del} from '../utils/request/apiRequest'; // 引入各種請求方法
import api from './apiList'; // 引入請求api路由

/**
 * 首頁接口請求
 */
const index = () => {
  let url = api.baseUrl + api.index;
  return get(url, {}, {});
}

export default {
  index: index
}

StatusInit.ts

import Status200 from '@/utils/status/statusCode/Status200';
import Status401 from '@/utils/status/statusCode/Status401';
import Status from '@/utils/status/status';

export default class StatusInit
{
  public init(status: number, msg: string, res: object)
  {
    let state: Status = null;
    switch ( status ) {
      case 200:
        state = new Status200();
        break;
      case 401:
        state = new Status401();
        break;
    }
    state.status(status, msg, res);
  }
}

status.ts

export default interface Status {
  status(state: number, msg: string, res: object): any;
}

Status200.ts(其他狀態(tài)文件類似)

import Status from '@/utils/status/status';
import Message from '@/utils/Message/Message';

export default class Status200 implements Status
{
  public status(state: number, msg: string, res: object): any {
    let Message = new Message();
    Message.msg(msg, 'success', 1500, true, true, 100);
    return Promise.resolve(res);
  }
}