vue项目封装axios请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38797742/article/details/114932954

本文介绍了一个使用Axios进行HTTP请求封装的具体实现，包括请求和响应拦截器的设置，并展示了如何通过封装后的工具调用不同类型的API接口，如获取消息列表、审核消息等。

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

目录：
在这里插入图片描述

一，src/utils/request.js

import axios from 'axios'
import { getToken } from '@/utils/auth'
import store from '@/store'

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    withCredentials: true,
    timeout: 5000,
    // headers:{ 
    //     "Access-Control-Allow-Origin": '*',
    //     "Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',
    //     "Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS, DELETE" ,
    // },
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    
    if(store.getters.token == null){
        // 首次登录--固定头部内容
        config.headers.client_id = 'jeecp'
        config.headers.client_secret = 'webApp'
    }else{
        config.headers.Authorization = 'Bearer '+ token
    }
    // if(config.method == 'post' || config.method == 'put'){
        // 在每个请求中加 parkId
        // config.data['parkId'] = Cookies.get('parkId')
        // console.log(config)
    // }
    
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // return res
    if(res.code != 0){
        Message({
            message: res.message || 'Error',
            type: 'error',
            duration: 5 * 1000
        })
        // 报错--根据 code 处理
        console.log("请求报错啦: ", res)
    }else{
        // 成功
        return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

二，src/utils/api.js

import request from '@/utils/request'
import store from '../store'

// post
export function getMessage(page, size, data) {
    return request({
      url: store.getters.gateway2 + '/admin/info_management/v1/page_information/' + page + '/' + size,
      method: 'post',
      data
    })
}

export function getNoApprove(page, size, type, title, startTime, endTime) {
  return request({
    url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size,
    method: 'get',
    params: {
      type,
      title,
      startTime,
      endTime,
      issue: 1,
      examined: 0
    }
  })
}

export function getMessageByIdToApprove(data, infoId) {
  return request({
    url: store.getters.gateway2 + '/admin/info_management/v1/confirm/',
    method: 'put',
    data,
    params:{
      infoId
    }
  })
}

export function delUploadImg(url) {
    return request({
      url: store.getters.gateway2 + '/upload/delFile',
      method: 'delete',
      url
    })
}

注意

传的参数类型：

1，url

url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size

2，params

params:{
    infoId
}

3，query

data,

三，调用接口

import { addMessage } from '@/api/message'

addMessage(this.formData).then(res => {
    console.log("add", res)
    if(res.code === 0){
        this.$message({type: 'succees',message: '添加成功!'});
    }else{
        this.$message({type: 'error',message: '请求出错!'});
    }
    
}