vue基于axios封装网络请求

结构

• index.js 网络模块入口文件 定义请求方法
• netManager.js 封装网络层核心功能 请求方式等
• configUrl.js 统一管理url路径参数
• configRequest.js 统一管理请求方式

封装代码

• netManager.js

// 封装核心方法
/* 
* URL
* 请求参数
* 请求方式
* 请求成功或者失败的处理
* 请求前请求后处理
*/

/* 
* 网络模块需要提供的功能
* GET POST请求 上传 下载
*/

// 导入axios
import axios from "axios"
// 导入请求方法
import request from "./configRequest"
import configUrl from "./configUrl";

/* 
* 配置axios的config文件
* 调用axios 的rceate函数 接收config对象 返回一个带有config的axios对象
*/

const instance = axios.create({
    // 服务器url默认路径
    baseURL: "http://localhost:8080/",
    // 请求超时时间
    timeout: 1000
})


/* 
* GET
*/

//  请求路径  接收参数
function GET(url, params) {
    // 封装axios的get方法
    // 通过promise返回数据
    /* 
    resolve  进行中转已完成
    reject   进行中转失败
    */
    // instance=======axios
    
    return new Promise((resolve, reject) => {
        instance.get(url, params).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error);
        })
    })
}

function POST(url, params) {
    // 调用axios.post方法 返回值是一个promise
    // instance=======axios
    return new Promise((resolve, reject) => {
        instance.post(url, params).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error);
        })
    })
}

// 判断url return请求方法
function methods(url) {
    switch (url) {
        case configUrl.LOGIN:
            return request.GET_TYPE
        case configUrl.REPUEST:
            return request.POST_TYPE
    }
}

let requestType = methods(request)
// 导出请求函数
export function requestData(url, params) {
    switch (requestType) {
        case configUrl.LOGIN:
            return GET(url, params)
        case configUrl.REPUEST:
            return POST(url, params)
        default:
            return GET(url, params)
    }
}

configUrl.js

/* 
* 统一管理url路径参数
*/
const configUrl = {
    LOGIN:"/login",
    REPUEST:"/request"
}
export default configUrl

configRequest.js

/* 
* 统一管理请求方式
*/
const request = {
    GET_TYPE:"get",
    POST_TYPE:"post"
}
export default request

index.js

/* 
网络模块入口文件
定义请求方法
处理整个项目的网络请求功能
*/

import {requestData} from "./netManager"

// 具体业务请求
const LOGIN = (url,params)=>{
    return request(url,params)
}
const REPUEST = (url,params)=>{
    return request(url,params)
}

// 合并对象
const apiList = {
    LOGIN,
    REPUEST
}

// 统一导出
export default apiList