vue2 封装网络请求 axios

最新推荐文章于 2025-05-05 11:07:35 发布

要成为光的女人

最新推荐文章于 2025-05-05 11:07:35 发布

阅读量1.8k

点赞数 1

分类专栏： vue2 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_51614564/article/details/126795027

版权

vue2 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在项目中配置和封装axios以适应不同环境的API请求。首先通过npm安装axios，然后创建一个config文件夹，根据NODE_ENV设置基础URL和超时时间。接着在services.js中创建axios实例并添加请求和响应拦截器。进一步封装了post、get和patch请求，并提供了登录验证请求的示例。最后展示了在页面中如何调用这些封装的请求方法。

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

1. 在终端输入命令：

npm install axios

2.在根目录新建一个 request 文件夹专门存放网络请求相关的文件

# 新建一个文件：根据不同的开发环境，配置不同的请求

//2.根据process.env.NODE_ENV
//开发环境：development;
//生产环境：production ;
//测试环境：test ;
let BASE_URL = ''
let TIME_OUT = 10000
if (process.env.NODE_ENV === 'development') {
  BASE_URL = '/api'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://jiang.org/prod'
} else {
  BASE_URL = 'http://jiang.org/test'
}
//在将这两个东西导出
export { BASE_URL, TIME_OUT }

3.接下来我们可以新建一个文件servies.js 创建axios 实例

import axios from "axios";
// 导入loading Loading 服务
import { Message } from 'element-ui'
import {BASE_URL, TIME_OUT } from './config' //不同环境的请求配置
export function request(config){
    const service =axios.create({
        baseURL:BASE_URL, //配置公共接口
        timeout:TIME_OUT //配置请求超时时间 
      })
      // 请求拦截器
service.interceptors.request.use(config=>{
//这里可以做token 设置
    return config
},err=>{})

// 响应拦截器
service.interceptors.response.use(res=>{
if(res.status===200){
 Message({
    message: '请求成功',
    center: true
 })
}else if (res.status===401) {
    Message({
        message: '未授权，请重新登录',
        center: true
     })
} 
  console.log(res)
  return res
  
},err=>{
  return err
})
   return service(config)  
 
}

4.封装post，get,patch 请求

//封装post，get,patch 请求
import { request } from "./servies";
 const jyRquest={
    //  post 封装请求
    post(config){
     return request({...config,method:'POST'})
    },
    get(config){
        return request({...config,method:'GET'})
    },
    patch(config){
    return request({...config,method:'PATCH'})
       }
}
export default jyRquest

5.封装真正的请求

import jyRequest from "../index";
// 登录验证请求
export function accountLoginRequest(account){
    return jyRequest.post({
        url:'/login',
        data:account
    })
}

6.在页面使用封装的请求方法

accountLoginRequest(account).then(res=>{
             const {id,name,token}=res.data
            })