前端请求后端接口大汇总,让前端不再受委屈! (四、接口统一封装)

6,884 阅读2分钟

这是我参与8月更文挑战的第17天,活动详情查看:8月更文挑战

本文介绍接口封装的思路及代码实现。

首先说一下接口统一管理的问题,在中大型项目中,为了请求的复用,我们可以将所有的代码放到一起集中管理。在src下新建一个api目录,用于存放所有的接口

src/api
    util.js
    user.js
    xxx.js
    httpClient.js  #工具函数

思路

  • 请求拦截

    • 在请求头添加一些参数,例如token,uid等
    • 判断用户登录状态,如果没有登录,直接跳转登录
    • 处理请求数据转换发送请求的数据格式,json→urlencoded (可选的)
  • 响应拦截

    • 判断后端响应的业务状态码,进行不同的处理

      • 例如用户登录状态过期,直接跳转登录
      • 统一的报错提示

原理

我们使用axios的拦截器实现请求封装。原理如下:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

具体的代码实现

import axios from 'axios'
import qs from 'qs'
//配置统一的前缀
const baseURL = '/api'

const instance = axios.create({
    baseURL,
    timeout: 1000 * 60
})

// 添加请求拦截器
instance.interceptors.request.use(
    function(config) {
        addHeader(config)
        formatReq(config)
        return config
    },
    function(error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)
function addHeader(config) {
    const TOKEN = 'Beard good'
    const uid = '18181881'
    config.headers.token = TOKEN
    config.headers.uid = uid
}
function formatReq(config) {
    // 如果参数类型不是formdata,把请求参数转化为x-www-urlencoded
    if (!(config.data instanceof FormData)) {
        config.data = qs.stringify(config.data)
    }
}


// 添加响应拦截器
instance.interceptors.response.use(
    function(response) {
        // 对响应数据做点什么
        handleResponseCode(response)
        return response
    },
    function(error) {
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
const CODE={
    SUCCESS:2000,
    AUTH_ERR:4000
}
function handleResponseCode(response){
    console.log("handleResponseCode -> response", response)
    if(typeof response.data !=='object')return 
    const code=response.data.code
    if(!code)return 
    switch (code) {
        case CODE.SUCCESS:
            console.log('success')
            return             
        case CODE.AUTH_ERR:
            console.log('auth error,跳转登录')
            return            
        default:
            console.log('error',response.config.url,response.data.desc)
           return 
    }

}
export default instance

使用封装之后的函数

src/api/user.js中使用封装的api,代码如下

import http from './httpClient'

//获取用户信息
const getProfile=(id)=>http.request({url:'xxx',params:{id}})
//登录
const login=(req)=>http.request({url:'xxx',method:'post',data:req})


export const USER_API={
    login,
    getProfile
}

在具体的组件中引入user.js并调用对应的接口即可,vue中和react中都可以使用

import {USER_API} from 'src/api/user.js'

USER_API.login()