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') }

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