vue-axios封装（可直接使用）

vue-axios封装（可直接使用）

http.js

import axios from 'axios';
axios.defaults.baseURL = "http://192.168.56.100:8888"
// 超时时间 /10000毫秒
axios.defaults.timeout = 10000
// post和put请求以json的格式发送
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.put['Content-Type'] = 'application/json'
// 拦截器（中间件）
axios.interceptors.request.use(
    config => {
        // 路由守卫
        // 每次发送请求之前判断是否存在token，如果存在，
        // 则统一在HTTP请求的header都加上token，不用每次获取，
        // 即使本地token在，也有可能token是过期的，
        // 所以在响应拦截器中要对返回状态进行判断
        const token = sessionStorage.getItem('jwt_token')
        token && (config.headers.Authorization = token)
        return config
    },
    error => {
        return Promise.error(error)
    }
)

axios.interceptors.response.use(
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出，但不在2XX范围内
            errorHandle(response.status, response.data.message)
            return Promise.reject(response)
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时,更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据,会在断网组件中说明
            StorageEvent.commit('changeNetwork', false)
        }
    }
)

export function axios_get(url, params) {
    return new Promise(
        (resolve, reject) => {
            // console.log(params);
            axios.get(
                url, { params: params }
            )
                .then(res => {
                    console.log("封装信息的res：", res);
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
        }
    )
}

export function axios_post(url, data) {
    return new Promise(
        (resolve, reject) => {
            console.log(data);
            axios.post(
                url, JSON.stringify(data)  // 将后端传递的数据转换为json的形式
            )
                .then(res => {
                    console.log("封装信息的res：", res);
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

export function axios_put(url, data) {
    return new Promise(
        (resolve, reject) => {
            console.log(data);
            axios.put(
                url, JSON.stringify(data)
            )
                .then(res => {
                    console.log("封装信息的res：", res);
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

export function axios_delete(url, data) {
    return new Promise(
        (resolve, reject) => {
            console.log(data);
            axios.delete(
                url, { params: data }
            )
                .then(res => {
                    console.log("封装信息的res：", res);
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

 

api.js

import { axios_get, axios_post, axios_put, axios_delete } from './http.js'

export const lyt_send_get = l => axios_get("/a2/users/", l)

export const lyt_send_post = l => axios_post("/a2/users/", l)