axios封装

183 阅读1分钟

将axios封装在index.js文件中

import axios from 'axios';
/* vueCli默认配置好的环境变量 */
let baseURL = '';
if (process.env.NODE_ENV === 'development') {
    /* 这里是开发环境的地址 */
    baseURL = 'http://timemeetyou.com:8889/api/private/v1/'
} else if (process.env.NODE_ENV === 'production') {
    /* 这里是生产环境的地址 */
    baseURL = 'http://timemeetyou.com:8889/api/private/v1/'
}
/* 创建一个axios实例instance */
var instance = axios.create({
    baseURL,
    timeout: 1000
});

instance.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token
        // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
        localStorage.token && (config.headers.Authorization = localStorage.token)
        return config
    },
    error => {
        return Promise.error(error)
    }
)

// 响应拦截器
instance.interceptors.response.use(response => {
    return Promise.resolve(response.data)
}, error => {
    return Promise.reject(error.response)
})

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

export function httpPost({
    url,
    data = {},
    method = 'post'
}) {
    return new Promise((resolve, reject) => {
        instance({
            url,
            data,
            method
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

在request.js文件中引用index.js文件,解构httpPost

import {httpPost} from './index'

// 登录接口
export const loginHttp = (data = {}) => httpPost({ url: 'login', data })