vue 配置axios 封装接口

最新推荐文章于 2025-07-13 23:07:30 发布

Time202051

最新推荐文章于 2025-07-13 23:07:30 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue proxy

本文链接：https://blog.csdn.net/weixin_45890414/article/details/111357366

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue项目中配置Axios的方法。首先使用npm安装Axios，接着在src/utils/request.js设置请求头、拦截器，在src/utils/http.js导入封装实例，在src/api/api.js封装请求接口。还可在根目录下的vue.config.js进行配置，也能将其挂载到prototype。

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

使用npm安装axios

npm install axios

src/utils/request.js 请求头，请求拦截器，响应拦截器

import axios from 'axios'
const service = axios.create({
    baseURL: process.env.BASE_API,
    timeout: 3 * 1000
})
service.interceptors.request.use(config => {
    config.data = JSON.stringify(config.data);
    config.headers = {
        // 'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
        'Content-Type': 'application/json;charset=UTF-8' //配置请求头
    }
    return config
}, error => {
    Promise.reject(error)
})
//4.导入文件
export default service

src/utils/http.js 导入封装好的axios实例

// 导入封装好的axios实例
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.params = params
        return request(config)
    },
    delete(url, params) {
        const config = {
            method: 'delete',
            url: url
        }
        if (params) config.params = params
        return request(config)
    }
}
//导出
export default http

src/api/api.js 这里就是所有封装的请求接口。可以根据自己的地址去自己写。再自定义个方法名。这样用的时候直接导入api.js文件即可

import http from '../utils/http'
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let resquest = "http://xxx.xxx.xxx.xxx:8090/api"  //xxx的地方是后端ip

// 通过姓名获取员工信息
export function racerNameTabelAPI(params) {
    return http.get(`${resquest}/racer/name`, params)
}
//通过姓名获取员工信息
export function racerQueryTabelAPI(params) {
    return http.get(`${resquest}/racer/query`, params)
}
//修改员工信息
export function racerUpdateAPI(params) {
    return http.post(`${resquest}/racer/update`, params)
}
//查询队长姓名对应的队伍资料
export function leaderTabelAPI(params) {
    return http.get(`${resquest}/team/leader`, params)
}
//查询队员姓名对应的队伍资料
export function mateTabelAPI(params) {
    return http.get(`${resquest}/team/mate`, params)
}
//修改队伍资料
export function teamUpdateAPI(params) {
    return http.post(`${resquest}/team/team/update`, params)
}

//导入   或者 import api from '@/api/api' 使用  api.racerNameTabelAPI().then()
import {
  racerNameTabelAPI,
  racerQueryTabelAPI,
  racerUpdateAPI,
  leaderTabelAPI,
  mateTabelAPI,
  teamUpdateAPI
} from '@/api/api'
//这是调用的方法
    teamTrueHandle() {
      let objTemp = {
        status: this.SelectValue
      }
      let obj = Object.assign(this.teamTeap, objTemp)
      teamUpdateAPI(obj).then(res => {
        if (res.data.resultCode == 0) {
          this.teamTableData = res.data.data
          this.$message.success('成功')
        } else {
          this.$message.error('异常')
        }
      })
    }

根目录下 vue.config.js 没有可以手动建

//proxy是处理跨域的
module.exports = {
    devServer: {
        host: '0.0.0.0', // 允许外部ip访问
        port: 8080, // 端口
        https: false, // 启用https
        proxy: {
            '/api': {
                target: 'http://xxx.xxx.xxx.xxx:8090',  
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    '^/api': '/api'
                }
            }
        }
    }
}

配置axios有还有很多方法还可以直接挂在到prototype

//main.js
import axios from 'axios'
Vue.prototype.$http = axios  //使用就 this.$http.get(url,{params:参数})

这样就配置好了。不明白也可以从头再看几遍。实战项目亲测