封装一个请求——axios

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
详细内容可以参考文档axios。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

使用axios封装一个简单请求

支持get、post等。

直接上代码：

import axios from 'axios'
import config from '../config.js'

function getHeaders(extraCheckdelay = '') {
    let delay = new Date().getTime() + '';
    let checkdelay = md5(
        delay.substr(delay.length - 5, 5)
        + config.requestHeaders.p
        + config.requestHeaders.ver
        + config.requestHeaders.ch
        + delay.substr(0, 5)
        + config.requestHeaders.os
        + delay + extraCheckdelay
    );
    return { delay, checkdelay, version: config.requestHeaders.ver }
}
// 统一封装host
// config.js代码在后面
const HOST = config.requestHosts

// 封装请求
export function getData({ host, key, method, url, data = {}, headers = {}, contentType, extraCheckdelay, responseType }) {
    // TODO 从***获取token
    let tokenxxx = ''

    if (!url) {
        console.log('您没有该权限', url)
        return Promise.reject({
            code: 401, msg: '您没有该权限'
        })
    }
    method = method.toLowerCase()

    if (method === 'get' && Object.keys(data)?.length) {
        url += '?';
        for (let key in data) {
            url += (key + '=' + encodeURIComponent(data[key]) + '&')
        }
        data = null
    }
    let defaultHeader = getHeaders(extraCheckdelay)
    if (contentType) {
        defaultHeader['Content-Type'] = contentType
    }
    let baseURL = host || HOST   // 优先选择自定义的host

    return axios({
        method, url, data,
        baseURL,
        headers: {
            Authorization: tokenxxx,
            ...config.requestHeaders,
            ...defaultHeader,
            ...headers
        },
        responseType: responseType || 'json'
    }).then(res => {
        if (!res.data) {
            return Promise.reject()
        }
        let code = Number(res.data.code)
        // TODO 这里可以做一些返回错误处理的操作
        // 返回文件对象
        if (responseType === 'blob') {
            //未成功
            if (res.data.type === 'application/json') {
                return Promise.resolve({ code: 201, msg: '导出文件出错' })
            }
            //成功返回
            return { data: res.data, code: 200 }
        }
        return { ...res.data, code }
    }).catch(err => {
        console.log('error:', err)
        return Promise.reject(err)
    })
}

config.js代码

// config.js
let env
let hostname = window.location.hostname
// 通过hostname判断不同环境 分为test/beta/prod
const config = {
	get requestHosts() {
        if (env === 'test') {
            return 'https://***test***';
        } else if (env === 'beta') {
            return 'https://***beta***';
        } else if (env === 'prod') {
            return 'https://***prod***';
        } else {  // 默认prod环境
            return 'https://***prod***';
        }
    }，
    requestHeaders: {
        ch: 'web',
        p: '2',
        ver: '2.0.0',
        os: 'web'
    }
}
export default config

至此，一个简单的请求封装完成。