前端api接口管理及axios二次封装

对请求的封装及api接口的管理的好处：
简化并统一设置发起请求的配置项，利于管理api接口。
以下内容分为两部分

1. axios二次封装
2. API接口管理规范

1. axios二次封装

在src下新建api文件夹作为api管理的模块
并新建http.js作为二次封装axios的文件

http.js代码如下：

import axios from 'axios'
import qs from 'qs'

//根据环境变量区分接口默认地址这里看自己需求配
switch(process.env.NODE_ENV){
    case "production":
        axios.defaults.baseURL="http://127.0.0.1:3000"
        break;
    case "test":
        axios.defaults.baseURL="http://192.168.1.1" 
        break;
    default:
        axios.defaults.baseURL="http://localhost:8080"
}

//设置超时时间和跨域是否携带凭证
axios.defaults.timeout=10000;
//设置CORS跨域允许携带凭证
axios.defaults.withCredentials=true;

axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded'
axios.defaults.transformRequest=data=>qs.stringify(data)
// axios.defaults.transformRequest=data=>{
//     var params=''
//     for(let attr in data){
//         params+=attr+'='+data[attr]+'&'
//     }
//     params=params.substr(0,params.length-1)
//     return params
// }

//设置请求拦截器
//客户端发送请求=》请求拦截器=》服务器
// TOKEN校验（JWT）接收服务器返回的token
// 存储到vuex/本地存储中，每一次发请求我们应该吧token带上
axios.interceptors.request.use((config)=>{
    // 携带上token
    let token=localStorage.getItem('token')
    token&&(config.headers.Authorization=token)
    return config
},error=>{
    return Promise.reject(error)
})

//响应拦截器
//服务器返回信息=》拦截的统一处理=》客户端js获取到信息
// axios.defaults.validatestatus=status=>{
       //自定义响应成功的http状态码
//     return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(response=>{
    return response.data;
    //看项目实际情况，这样写返回的数据就只有主体内容
},error=>{
    let {response} = error;
    if(response){
        //服务器最起码返回结果
        switch(response.status){
            case 401://=>权限问题，当前请求需要用户验证，一般是未登陆
                break;
            case 403://=>服务器已经理解请求，但是拒绝执行他，一般是token过期或session过期
                localStorage.removeItem('token')
                break;
            case 404://=>找不到页面
                break;
        }
    } else{
        //服务器连结果都没有返回
        if(!window.navigator.onLine){
            //如果客户端断网了:可以跳转到断网页面
            return
        }
        return Promise.reject(error)
        //可能是服务器错误返回一个promise
    }
});

export default axios

2. API接口管理规范

在api文件夹下新建personal.js作为personal模块的接口

personal.js代码如下：
我们import我们封装好的axios文件并导出接口对应的函数

import axios from './http'
function login(){
    return axios.post('/login')
}
function register(params){
    return axios.post('/register',params)
}
function signout(){
    return axios.post('/signout')
}
export default{
    login,
    register,
    signout
}

接着新建api.js作为定义数据请求的唯一路口

api.js代码如下：

import personal from './personal'
export default{
    personal
}

接着若是在vue中我们可以直接调用并挂到原型上

那我们在组件中就可以调用这个接口了

同理如果需要分模块则新建跟personal.js一样的文件并在api.js主入口里import即可。通过对api接口的统一抽离有助于后期的修改和管理。
接着试试效果请求也成功发送了。

最后：关于axios

对于新手需注意axios的几点：
axios默认的Content-Type是application/json
可以看到发送出的参数为Request Payload格式

如果我们想以表单形式传递也就是Form Data的格式则在请求头里修改content-type即可。

发现发送请求发现参数并没有正确转化，而是将我们的参数整个直接转成了key，并对应了一个空值。

于是我们需要自己转换下参数格式
转成xxx=xxx&yyy=yyy的格式

axios.defaults.transformRequest=data=>{
    var params=''
    for(let attr in data){
        params+=attr+'='+data[attr]+'&'
    }
    params=params.substr(0,params.length-1)
    return params
}

再次发送请求发现就可以了

当然还有更简单的转化方法
这时需要用到一个qs库
先通过npm install qs安装依赖并import进来
接着通过qs.stringify()便能成功转换。

axios.defaults.transformRequest=data=>qs.stringify(data)

发现效果也同样实现了