封装axios请求-优快云博客

本文链接：https://blog.youkuaiyun.com/halouKti/article/details/115985107

这篇博客详细介绍了如何在项目中配置和封装axios，包括在src下创建config.json来设置不同环境的基础URL，创建util/request.js以实现请求和响应拦截器，以及在util/http/index.js中定义HTTP方法。此外，还展示了在src/api目录下定义API接口，并在组件中调用这些API的示例。

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

1.在src文件下新建config.json

{
    "mode": "prod",
    "prod": {
        "basicURL": "https://xxxx"
    },
    "dev": {
        "basicURL": "https://xxxxx"
    }
}

2.在util下新建request.js

/****   request.js   ****/
// 导入axios
import axios from 'axios'
import config from '../config.json'
import Vue from 'vue'
import {
  fmtError
} from '../../src/api/errMsg'

//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口
  baseURL: config[config['mode']].basicURL,
  timeout: 5000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  Vue.$loading.start();//全局Loading开始
  if (config.timeout > 5000) {
    Vue.prototype.$messages({
      msg: '请求超时！',
      type: 'error'
    })
    Vue.$loading.finish();//全局Loading结束
  }
  let token = sessionStorage.getItem('Authorization')
  if (token != null) {
    config.headers.Authorization = token
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
  if (response.status === 200) {
    setTimeout(() => {
      Vue.$loading.finish();//全局Loading结束
    }, 1000);
    return Promise.resolve(response.data)
  } else {

    Vue.$loading.finish();//全局Loading结束

    let errMsg = fmtError(response.data.code) || response.data.message; //项目自定义 根据需求
    Vue.prototype.$messages({
      msg: errMsg,
      type: "error"
    })

    return Promise.reject(response.data.message)
  }

}, error => {
  /***** 接收到异常响应的处理开始 *****/
  Vue.$loading.finish();
  Vue.prototype.$messages({
    msg: '服务器连接失败！',
    type: 'error'
  })
  return Promise.reject(error)
})

export default service

3.在util下新建http中新建index.js

import request from "../request";

const http ={
     /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
      get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.data = params
        return request(config)
    }
}
export default http

4.在src文件夹下的api中

import request from "../util/http/http.js"

const CategoryLabels = () => request.get('/xx/xx/xx/xx')

export{
   CategoryLabels 
}

5.在组件中使用api

import { CategoryLabels  } from "@/api";

methods:{
	async lableList() {
      await CategoryLabels(1).then((res) => {
        console.log(res)
      });
    },
}