HTTP请求

区别对待axios在server端与client端处理

1. index-client.js 客户端请求封装

接口统一格式处理

{
    "code":2000,
    "message":"success",
    "data":{  
    },
    "success":true
}

对axios进行封装

• 对http error: 401、400、403、404、500....统一报错弹窗提示
• 对 res.code: 2000: OK，!2000统一弹窗提示，错误文案使用res.message

//index-client.js
import axios from 'axios'
import { statusToMsg, codeToMsg } from './getErrMsg'
import { removeToken, getToken } from '@/util/auth'
import { Message, Loading } from 'element-ui'
let loading
let count = 0
function startLoading() {
    if (count > 0) {
        loading.close()
    }
    count++
    loading = Loading.service({
        lock: true,
        text: '数据加载中...',
        background: 'rgba(0, 0, 0, 0)',
        target: '.app-container' // 设置加载动画区域
    })
}
function endLoading() {
    loading.close()
    count = 0
}

const showError = msg => {
    Message({
        showClose: true,
        message: msg,
        type: 'error',
        duration: 3.5 * 1000
    })
}

export default () => {
    const service = axios.create({
        baseURL: '',
        timeout: 60 * 1000, // 请求超时时间 60s
        withCredentials: true
    })

    //请求拦截器
    service.interceptors.request.use(
        config => {
            startLoading()
            config.headers['Authorization'] = 'Bearer ' + getToken()
            return config
        },
        error => {
            return Promise.error(error)
        })

    service.interceptors.response.use(
        response => {
            endLoading()
            const res = response.data
            const { code, data } = res
            if (code === 2000) {
                return Promise.resolve(data)
            } else {
                let errMsg = codeToMsg(code)
                showError(errMsg)
                return Promise.reject({
                    status: 200,
                    code,
                    message: errMsg
                })
            }
        },
        error => {
            endLoading()
            const { response, request } = error
            const {
                status,
                data
            } = response
            const {
                method,
                path
            } = request

            let errMsg = ''

            if (status === 401) {
                removeToken()
                window.location.href = '/login'
            } else {
                errMsg = statusToMsg(status)
                if (errMsg) {
                    showError(errMsg)
                }
            }
            return Promise.reject({ status, message: errMsg, data, method, path })
        }
    )

    return service
}

2. index-server.js 服务端请求封装

!200 、!2000报错，交给entry-server.js处理

//index-server.js

import axios from 'axios'
import { cookie2Str } from '@/util/cookie-tools'

const currentIP = require('ip').address()
const appConfig = require('../../app.config')

// 发起带 cookies 参数的请求
export default cookie => {
    const auth_toten = cookie && cookie['vue_ssr_token'] ? `Bearer ` + cookie['vue_ssr_token'] : ''

    let headers = {
        Accept: 'application/json, text/plain, */*; charset=utf-8',
        'Content-Type': 'application/json; charset=utf-8',
        Pragma: 'no-cache',
        'Cache-Control': 'no-cache',
        Authorization: auth_toten,
        'Cookie': cookie2Str(cookie)
    }

    const baseURL = `http://${currentIP}:${appConfig.appPort}`
    const service = axios.create({
        baseURL: baseURL,
        timeout: 60 * 1000, // 请求超时时间 60s
        withCredentials: true,
        headers: headers
    })

    service.interceptors.request.use(
        config => {
            return config;
        },
        error => {
            return Promise.error(error);
        })
    service.interceptors.response.use(
        response => {
            const res = response.data
            const { code, data, message } = res
            if (code === 2000) {
                return Promise.resolve(data)
            } else {
                return Promise.reject({
                    status: 200,
                    code,
                    message
                })
            }
        },
        error => {
            //todo 统一处理500、400等错误状态,这里reject下，交给entry-server.js的处理
            const { response, request } = error
            return Promise.reject({ status: response.status, data: response.data, method: request.method, path: request.path })
        }
    )

    return service
}