vue中axios的封装和api接口的管理

axios高级用法

1 .分离前端接口
2 .通过拦截搭配路由统一处理请求错误和需要登陆以及数据格式处理，loading组件
3 .请求转发
4 .ajax请求类型的分别，一部分可能不需要loading组件或者请求时间少于某个时间段不显示loading
5 .优先级区分：config参数首先是lib/defaults.js中定义的默认设置，其次是defaults实例属性的设置，最后是请求config参数的设置。后面的设置会覆盖前面的设置
6 .

http.js

1 .主要构成：构造基础的axios实例，进行一些基础的配置，比如环境的切换，返回错误的统一处理，不符合访问条件的请求拦截

import axios from 'axios'

const MINI_TIME=300
// 加载的最小时间，未做，其实这里两次相同的请求的最小间隔应该小于这个

const MAX_TIME=5000
// 超时时间

const MAX_CONTENT=20000

let _requests=[]
// 请求组，判断当前请求数目：想要实现的是如果里面有重复的就不请求


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导入需要用到的状态
//这里要在其余的地方来操作vuex和vue router，统一这些和业务无关的操作
axios.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
            console.log('开始请求')
            // 进行请求
        }else{
            cancelToken:new CancelToken(c=>{
                cancel=c
            })
            cancel()
        }
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)


// 响应拦截=================
axios.interceptors.response.use(
    response=>{
        if(response.status==200){
            cancelFlag=true
            // 请求完成，可以进行下一个请求
            console.log('123')
            return Promise.resolve(response)
        }else{
            return Promise.reject(response)
        }
    },
    error=>{
        // 拿到的服务器状态码不是200的时候
        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;

api/index.js

1 .功能，整合所有的接口

import search from './search'

export default{
    search
}

api/base.js

1 .接口的域名管理

const base={
    sq:'',
    bd:''
}
export default base;

api/search.js

1 .和具体业务有关，一个相同类型的接口一个js文件

import axios from '../http'
// search页面的api

//请求reward接口
const search={
    search(config){
        return axios.post('http://127.0.0.1:5000/search',config)
        // 请求的配置更加灵活，针对某一个需求进行不同的配置，关于配置的优先级，之前有介绍
    },
    huodong_item(config){
        return axios.post('http://127.0.0.1:5000/huodong_item',config)
    }
}
export default search;

vue实例挂载和使用

1 .挂载
import api from './requests/api/index.js'
Vue.prototype.$api=api