大型vue项目的api层如何封装?axios的优雅使用技巧

axios简述

1. ajax

XMLHttpRequest(XHR)，最早出现的发送后端请求技术。

优点：

• JQuery中ajax是对原生XHR的封装，使用更加方便。
• 添加了对jsonp对支持
• 提高了web程序的性能，实现局部刷新

缺点：

• 本身是针对MVC设计的，不符合现在MVVM的浪潮。
• 基于对原生XHR的开发，而XHR本身的架构不清晰。
• 单纯的使用ajax却要引入整个JQuery，不合理。

2. fetch

• fetch函数是原生函数，没有使用XHR对象。
• 使用时需要重新封装，不方便。
• 对404，500的响应依旧是成功。

3. axios

• 从浏览器中创建XHR
• 从node.js创建http请求
• 支持PromiseAPI
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持XSRF（XSRF，又称CSRF，跨站请求伪造，较XSS而言更加危险难防范。）

大型项目api层架构应该如何设计

// service.js -- 请求拦截与响应拦截


import axios from 'axios';

//获取token
function getToken(){
    //假设token存储与seesionStorage中
    return window.sessionStorage.getItem('token') || '';
}

//创建axios实例
let service = axios.create({
    baseURL: process.env.BASE_API,
    timeout: 5000
})

//请求拦截
service.interceptors.request.use(
    config => {
        if(getToken()){
            config.headers['token'] = getToken();
            config.headers['Content-Type'] = 'application/json;chartset=utf-8';
        }
        return config;
    },
    error => {
        Promise.reject(error);
    }
)

//响应拦截
service.interceptors.response.use(
    response => {
        let res = response.data;
        if(res.status == 0){//请求成功时
            Promise.resolve(res);
        } else {
            //各种请求状态的处理
        }
    },
    error => {
        return Promise.reject(error);
    }
)

export default service;

//http.js -- 封装http请求
import service from './service'

export function get(url, params){
    return new Promise((resolve, reject)=>{
        service.get(url, params).then(res=>{
            resolve(res);
        }).catch(err=>{
            reject(err);
        })
    })
}

export function post(url, params){
    return new Promise((resolve, reject)=>{
        service.post(url, params).then(res=>{
            resolve(res);
        }).catch(err=>{
            reject(err);
        })
    })
}

// url.js -- 统一管理URL

const url = {};

url.USER_LOGIN = "";

export default url;

//login.js

import url from './url'
import {get,post} from './http'

export function login(params){
    return post(url.USER_LOGIN, params);
}

前端思路

网易云前端公开课课程链接