前端基于axios封装api

封装思想:

封装:

/** * Created by Administrator on 2017/7/20 0020. */import Vue from 'vue'import axios from 'axios'import qs from 'qs'axios.interceptors.request.use(config => {    // loading    return config}, error => {    return Promise.reject(error)});axios.interceptors.response.use(response => {    return response}, error => {    return Promise.resolve(error.response)});function checkStatus (response) {    // loading    // 若是http状态码正常，则直接返回数据    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {        return response;        // 若是不须要除了data以外的数据，能够直接 return response.data    }    // 异常状态下，把错误信息返回去    return {        status: -404,        msg: '网络异常'    }}function checkCode (res) {    // 若是code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，能够弹出一个错误提示，告诉用户    if (res.status === -404) {        // alert(res.msg)    }    if (res.data && (!res.data.success)) {        // alert(res.data.error_msg)    }    return res}export default {    install(Vue,options)    {        Vue.prototype.post=(url, data)=>{            return axios({                method: 'post',                baseURL: 'http://aaa.xinphoto.me/index.php',                url,                data: qs.stringify(data),                timeout: 10000,                headers: {                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'                }            }).then(                (response) => {                    return checkStatus(response)                }            ).then(                (res) => {                    return checkCode(res)                }            )        };        Vue.prototype.get=(url, params) =>{        return axios({            method: 'get',            baseURL: 'http://aaa.xinphoto.me/index.php',            url,            params, // get 请求时带的参数            timeout: 10000        }).then(            (response) => {                return checkStatus(response)            }        ).then(            (res) => {                return checkCode(res)            }        )    };        Vue.prototype.all=([callback1,callback2,callback])=>{            return axios.all([callback1,callback2,callback]).then(axios.spread(function(acct,perms,res){                return [acct,perms,res]            }))        }    },    post(url, data){        return axios({            method: 'post',            baseURL: 'http://aaa.xinphoto.me/index.php',            url,            data: qs.stringify(data),            timeout: 10000,            headers: {                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'            }        }).then(            (response) => {                return checkStatus(response)            }        ).then(            (res) => {                return checkCode(res)            }        )    },   get(url, params){    return axios({        method: 'get',        baseURL: './static/image.json',        url,        params, // get 请求时带的参数        timeout: 10000    }).then(        (response) => {            return checkStatus(response)        }    ).then(        (res) => {            return checkCode(res)        }    )}}