vue-axios二次封装

import axios from 'axios'
import qs from 'qs'
import { Toast } from "mint-ui"
import {httpBaseUrl} from './config'    ====httpBaseUrl为域名地址


/**
 * 该文件对axios进行二次封装
 *
 * 已经将封装后的axios定义了全局变量$http
 * 参数值
 * method  请求方式，  'GET' 或 'POST'，不区分大小写
 * url     请求的路径，  不需要写ip,端口以及基础项目路径， ip和端口配置在同文件夹下的config.js文件中，即httpBaseUrl  例如： 10.88.123.01:8080
 * data    请求的参数，  类型为一个对象
 * 返回值为Promise形式，then()中的回掉参数data 为请求返回值的data，  假设返回值为res ， 则data为 res.data的值
 *
 *
 * 
 */

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(config=>{
    return config
},error=>{
    return Promise.reject(error)
})


//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(response=>{
    return response
},error=>{
    return Promise.resolve(error.response)
})

//对错误数据进行处理
function errorState(response){
    //如果状态吗正常，则直接返回数据
    if(response&&(response.status===200||response.status===304||response.status===400)){
        //不需要date之外的数据，可以直接返回response.data
        return response
    }else{
        Toast({
            message: '网络异常',
            position: 'bottom',
            duration: 3000,
        })
    }
}

//对正确返回数据进行处理
function successState(res){
    // if(res.data.body&&res.data.status){
    //     // if(res.data.body.length==0){
    //     //     Toast({
    //     //         message: '暂无数据',
    //     //         position: 'bottom',
    //     //         duration: 1000,
    //     //     })
    //     // }
    //     if(res.data.status.code == '1001'){
    //         Toast({
    //             message: '后台报错了',
    //             position: 'bottom',
    //             duration: 3000,
    //         })
    //     }
    // }
}


//后台请求方法
const httpServer=(method='GET',url,data={},option={})=>{
    let requestMethod=method.toUpperCase()
    if(url.indexOf("://")>0){
        url=url
    }else if(url[0]!='/'){
        url=httpBaseUrl+'/'+url
    }else{
        url=httpBaseUrl+url
    }
    let Public={  //存放公共参数

    }
    let httpDefaultOpts={ //http默认配置
       method:requestMethod,
        url:url,
        timeout:65*1000,
        //Object.assign是ES6新添加的接口，主要的用途是用来合并多个JavaScript的对象。
        params:Object.assign(Public,data),     //GET
        // data:qs.stringify(Object.assign(Public,data)),
        data:JSON.stringify(Object.assign(Public,data)),  //POST
        headers:requestMethod=='GET'?{
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
          }:{
            'X-Requested-With': 'XMLHttpRequest',
            // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            "Content-Type": "application/json; charset=UTF-8"
          }
    }
    Object.assign(httpDefaultOpts,option)

    if(requestMethod=='GET'){
        delete httpDefaultOpts.data
    }else{
        delete httpDefaultOpts.params
    }

    return new Promise((resolve,reject)=>{
        axios(httpDefaultOpts).then((res)=>{
            // console.log(res)
            successState(res)
            resolve(res.data)
        }).catch((response)=>{
            console.log(response)
            errorState(response)
            reject(response)
        })
    })
}

export default httpServer