vue axios请求封装

新建utils文件夹，在该文件夹下新建request.js文件

request.js

import axios from "axios";
// 创建一个axios的app

const request = axios.create({
    baseURL:'http://127.0.0.1:8000/api/v1/',
    timeout:5000
})

// 暴露 
export default request

在发送请求的组件中导入request.js文件

进一步优化
根据功能新建不同的js文件

以students.js为例子

import  request from '../utils/request'

// restful 获取【所有，某一个，添加，修改，删除】

/* 获取所有 */
const getAll = (params)=>{
    // request
    return request({
        method:'get',
        url:'students/',
        params
    })
}

/* 添加 */
const add= (data)=>{
    // request
    return request({
        method:'post',
        url:'students/',
        data
    })
}

/* 获取单一数据 */
const getOne= (id)=>{
    // request
    return request({
        method:'get',
        url:`students/${id}`,
    })
}

/* 修改数据 */
const edit= (id,data)=>{
    // request
    return request({
        method:'put',
        url:`students/${id}`,
        data
    })
}

/* 删除 */
const del= (id)=>{
    // request
    return request({
        method:'delete',
        url:`students/${id}`,
    })
}

export default {
    getAll,getOne,edit,del,add
}

学生组件中导入

其他的也一样，改个路由就行了

这样导入特别麻烦，如果有很多个那就得导入很多遍

api 下新建index.js

可以进一步封装,因为这么多请求其实只有url不一样

import request from "../utils/request";

// 通过面向对象的方式 =》类

export default class APIBase{
    // 定义属性 ts
    public name:String;
    
    // 构造器
    constructor(name:string){
        this.name = name
    }

    //获取所有
    // 方法 这里的?表面参数可传可不传
    public getAll = (params?:any)=>{
        return request({
            method:'get',
            url:`$(this.name)/`,
            params
        })
    }

    // 添加
    public add = (data:any)=>{
        return request({
            method:'post',
            url:`$(this.name)/`,
            data
        })
    }

    //获取一个
    // 方法 这里的?表面参数可传可不传
    public getOne = (id?:any)=>{
        return request({
            method:'get',
            url:`${this.name}/${id}/`,
        })
    }

    //修改
    // 方法 这里的?表面参数可传可不传
    public edit = (id:any,data:any)=>{
        return request({
            method:'put',
            url:`${this.name}/${id}/`,
            data
        })
    }

    // 删除
    // 方法 这里的?表面参数可传可不传
    public del = (id:any)=>{
        return request({
            method:'delete',
            url:`${this.name}/${id}/`,
        })
    }
}

在index.js中

此时可以正常访问

// 导入所有api
import APIBase from "./apibase";

// 实例化对象
let students = new APIBase('students')

let majors = new APIBase('majors')

let facultys = new APIBase('facultys')

// 封装并发布
export default {
    students,
    majors,
    facultys
}

如果想添加别的方法，可以继承类

配置全局变量
在全局注册

这样是可以正常访问的