vue架构-如何封装API（axios+promise）

简单分享一个封装api的案例

api封装还是有比较多的种类的，能做到将复用多的代码封装好，可维护性高就是好封装。

案例一

具体思路是将api请求分为四层：

• service层：连接后台，拦截处理

示例代码：

import axios from 'axios'
import Vue from 'vue'

// 获取token
function getToken(){
    return sessionStorage.getItem('token')
}
// 创建axios实例
let service = axios.create({
    baseURL: "https://lianghj.top:8888/api/private/v1/",
    timeout: 3000
})
// 配置请求拦截器
service.interceptors.request.use(
    (config)=>{
        // 返回 config
        config.headers.Authorization = getToken()
        return config
    })

export default service

• common层：封装请求方式

示例代码：

import service from './service'

//封装post请求
export function requestPost(url, data){
    return service.post(url,data)
} 

• api层：二次封装，设置url值、接收请求参数

示例代码：

import {requestPost} from '../common'

// 登录接口
export function login(data){
    return new Promise((resolve, reject)=>{
        requestPost('/login', data).then(res=>resolve(res.data))
        .catch(err=>reject(err))
    })
}

• 业务层：具体业务模块

示例代码：

<script>
    import { login } from '../request/api/login'
    //this.loginForm是login接口需要的参数值
    login(this.loginForm).then(res=>console.log(res))

</script>