axios封装和api接口管理

axios封装和api接口管理都是为了帮我们简化代码和后期维护的方便。
这次就说说axios的封装和api接口。

axios的封装

为了节省时间axios的下载我就不说了，直接开始引入吧，首先创建一个空文件夹network，当然名字可以自己取，叫network只是为了规范一些，在network里面创建一个http.js文件用来封装axios，一个api.js来管理接口，在http.js中引入axios
import axios from 'axios'
然后开始设置默认的路径：

// 当环境切换时改变axios的默认路径
if(process.env.NODE_ENV == 'development'){//这里写测试用的默认路径
    axios.defaults.baseURL = 'http://www.ceshi.com/'
}else if(process.env.NODE_ENV == 'production'){//这里是上线后的默认路径
    axios.defaults.baseURL = 'https://www.shangxian.com/'
}

还有一种“debug”的默认路径，我也不怎么了解，这里就不多说了。
接着，设置请求超时时间：

axios.defaults.timeout = 5000;

一般来说都是设置三到五秒，看项目需求，这里我设置的是五秒，之后开始设置请求拦截和响应拦截：

// 请求拦截和响应拦截
axios.interceptors.request.use(
    config => {
        config.headers = {}//在这里设置请求时需要携带的信息
        return config
    }
);
axios.interceptors.responce.use(
    response => {//响应成功时要做的事
    },
    error => {//失败时要做的事
        if (error,response,status){
        }
    }
);

请求拦截和响应拦截都需要看需求，这里就展示不了更多了。在之后就是封装get和post请求方法，当然axios有很多请求方法，这里就举例两种最常见的吧：

// 使用Promise返回axios请求的结果  (返回的是promise)
export function get(url,params){//url传入的接口，params传入的请求参数
    return new Promise((resolve,reject)=>{
        axios.get(url,{
            params:params
        }).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

export function post(url,params){//url传入的接口，params传入的请求参数
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    })
}

别忘记使用export抛出。因为get和post这两种请求方法的格式都差不多，我就不多说了。

api接口管理

在api.js文件中引入http.js文件的get和post方法：

import {get,post} from './http.js';
//传参的请求
export function getClassify(id){
    return get('api/app/courseInfo/basis_id='+id)
}
export function postCourseOutline(id){
    return post('api/app/courseChapter',id)
}
//不传参的请求
export function getAppIndex(){
    return get('api/app/recommend/appIndex')
}
export function postAppBanners(){
    return post('api/app/banner')
}

之后就可以有条有理的写请求了。