vue axios的二次封装

1、axios的二次封装

BiliBili作者原地址，多多支持

  npm i axios    //下载axios

首先创建两个文件夹在src目录下；api和config

1. 先在config文件夹下建立一个index.js；具体代码如下

   export default{
       baseUrl:{
           dev: "http://localhost:8082/mhy",	//开发环境
           pro: "http://xxx.xx.xx.xx:8082/mhy",	//上线环境
       }
   }

   当然我这里是因为我主要写后端springboot，就没有使用什么第三方前端的请求工具

2. 在api文件夹下建立一个axios.js；对axios进行二次封装

   import axios from "axios"
   import config from "@/config"
    
   // const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev:config.baseUrl.pro
   const baseUrl = config.baseUrl.pro
    
   class HttpRequest{
       //构造器
       constructor(baseUrl){
           this.baseUrl = baseUrl
       }
    
       //请求路径设置
       getInsideConfig(){
           const config = {
               baseURL:this.baseUrl,
               Header:{}
           }
           return config
       }
    
       //添加拦截器
       interceptors(instance){
           // 添加请求拦截器
           instance.interceptors.request.use(function (config) {
               // 在发送请求之前做些什么
               const token = localStorage.getItem("Accept-Token");
               if(token !== null && token !== ""){
                   config.headers["Accept-Token"] = token;
               }
               return config;
           }, function (error) {
               // 对请求错误做些什么
               // console.log('添加请求拦截器 请求错误')
               return Promise.reject(error);
           });
    
           // 添加响应拦截器
           instance.interceptors.response.use(function (response) {
               // 对响应数据做点什么
               // console.log('添加请求拦截器 响应')
               return response;
           }, function (error) {
               // 对响应错误做点什么
               // console.log('添加请求拦截器 响应错误')
               return Promise.reject(error);
           });
       }
    
       // 二次封装的请求
       request(options) {
           const instance = axios.create()
           options = {...this.getInsideConfig(),...options}
           this.interceptors(instance)
           return instance(options)
       }
    
   }
    
   export default new HttpRequest(baseUrl)

3. 最后在api文件夹下创建你需要调用的api，当然你可以写在一个里面，也可以不同模块分开写

   我这里是分开写的

   

4. 然后看看具体怎么使用

   fileApi.js

   import axios from "./axios";
    
   // 上传文件图片
   export const uploadImgAPI = (param) => {
       return axios.request({
           url: `/uploadImg/${param.id}`,
           method: "post",
           data: param.formData
       })
   }
    
   // 删除一个文件
   export const deleteImgAPI = (param) => {
       return axios.request({
           url: `/deleteImg`,
           method: "post",
           data: param
       })
   }

   简单的写一个；在组件中引入就可以使用了

   import { deleteImgAPI, uploadImgAPI } from '@/api/fileApi'

   

5. 当然最后你也可以全局注册一下，然后直接通过proxy调用，也很方便，这里就不多展示了