vue2.x封装axiosAPI接口_vue2写axios和api接口-CSDN博客

本文将详细介绍如何在Vue2.x项目中封装并使用Axios进行API接口调用，包括设置请求拦截器、响应拦截器，以及处理错误等关键步骤，助你提升项目中HTTP请求的管理和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios'
import Store from '../store'
import {
   
    Message, MessageBox } from 'element-ui'
import GLOBAL from '../api/global'
import qs from 'qs'

axios.defaults.baseURL = GLOBAL.baseUrl
axios.defaults.timeout = 100000
// 请求拦截
axios.interceptors.request.use(
  config => {
   
   
    if (Store.state.wk_token) {
   
   
      config.headers.Authorization = Store.state.wk_token
    }
    // if (config.method === 'post') {
   
   
    //   config.data = {
   
   
    //     ...config.data,
    //     _t: Date.parse(new Date()) / 1000
    //   }
    // } else
    if (config.method === 'get') {
   
   
      config.params = {
   
   
        _t: Date.parse(new Date()) / 1000,
        ...config.params
      }
    }
    return config
  },
  error => {
   
   
    return Promise.reject(error)
  })
// 响应拦截
axios.interceptors.response.use(
  response => {
   
   
    return response
  },
  error => {
   
   
    if (error.response) {
   
   
      return Promise.reject(error.response)
    }
  })

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