axios

封装的好处

1 .统一管理所有的请求地址
2 .统一配置所有的请求参数
3 .统一定义请求失败，请求成功的处理逻辑
4 .统一做权限管理，跳转邓丽逻辑
5 .统一操作Vuex
6 .统一操作loading
7 .创建文件夹管理对应的api

1 .GM.js 里面全都是跟gm有关的请求地址
2 .修改地址直接去对应的文件夹找就可以

import axios from 'axios'

const MINI_TIME=300
// 加载的最小时间

const MAX_TIME=5000
// 超时时间

const MAX_CONTENT=20000

let _requests=[]
// 请求组，判断当前请求数目

let cancel,promiseArr={}

const cancelToken=axios.CancelToken
let cancelFlag=true
// 请求拦截器



// 环境的切换

// if(process.env.NODE_ENV=='development'){
//     axios.defaults.baseURL=
// }else if(process.env.NODE_ENV=='debug'){
//     axios.defaults,baseURL
// }else if(process.env.NODE_ENV="production"){

// }

// 创建axios实例
let instance=axios.create({timeout:MAX_TIME, maxContentLength: MAX_CONTENT})
// 默认返回的是json
instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'


// 请求拦截================

// 需要登录在请求的数据，或者post请求的时候，需要序列化我们请求的数据
import store from '../vuex/index'


// import { Router } from 'express';
// 从vuex导入需要用到的状态
instance.interceptors.request.use(
    config=>{
        // const token=store.state.token;
        // token&&(config.headers.Authorization=token)

        // 发起请求时，取消掉当前正在进行的相同请求
        // if(promiseArr[config.url]){
        //      promiseArr[config.url]('操作取消')
        //      promiseArr[config.url]=cancel
        //     //  cancel()
        // }else{
        //     promiseArr[config.url]=cancel
        // }

        if(cancelFlag){
            cancelFlag=false
            // 进行请求
            store.commit('search/SET_LOADING',true)
        }else{
            cancelToken:new CancelToken(c=>{
                cancel=c
            })
            cancel()
        }
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)


// 响应拦截=================
instance.interceptors.response.use(
    response=>{
        store.commit('search/SET_LOADING',false)
        if(response.status==200){
            cancelFlag=true
            // 请求完成，可以进行下一个请求
            return Promise.resolve(response)
        }else{
            return Promise.reject(response)
        }

        return Promise.resolve(response)
    },
    error=>{
        // 拿到的服务器状态码不是200的时候
        store.commit('search/SET_LOADING',false)
        // 先取消loading图标再说
        if(error.response.status){
            switch(error.response.status){
                case 401:
                // 未登录，这里进行路由跳转
                        Router.replace({
                            path:'/login',
                        });
                break;
                case 403:
                // token过期
                // 弹个提示
                break;
                case 404:
                // 请求不存在
                default:
                // 弹个提示i，报错

                // 所有可能的错误类型
                // 错误请求

            }
            return Promise.reject(error.response)
        }else{
            // 说明是网络问题
            console.log('网络有问题啊')
        }  
    }
)

// 主要就是正确的直接返回，错误进行统一处理



// 添加请求，显示loading:是所有的请求都要走这个，还是只是用户看到的显示
function pushRequest(config){
    _requests.push(config)
    // 把loading状态传到vuex里面
}

function popRequest(config){
    let _index=_requests.findIndex(r=>{
        return r===config
    })
    if(_index>-1){
        _requests.splice(_index,1)
    }
    if(!_requests.length){
        // 切换loading状态
    }
}

// 提示函数


// 跳转页
const toLogin=()=>{
    router.replace({
        path:'/login',
    })
}

export default instance;