封装axios及接口调用

前言：

封装axios的目的是为了方便项目对接口统一管理，所有调用接口都写在一个文件里。

项目结构

按照国际惯例，先贴目录结构图（以一个vue项目为例，对内部的接口进行封装）

img.jpg

代码部分

src目录下新建axios/index.js

import axios from "axios";
import qs from "qs"; //data序列化
const instance = axios.create({
    withCredentials: true  //跨域是否携带凭证
});
//请求拦截器
instance.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
//响应拦截器
instance.interceptors.response.use(
    response => {
        return Promise.resolve(response.data); //这里返回的是data，并不是全部response
    },
    error => {
        return Promise.reject(error);
    }
);

基本的axios封装就完成了，包括请求拦截、响应拦截，可以根据项目实际情况进行变更

调用封装好的instance，所有调用接口都写在这里
在axios/index.js继续写入

...
//例如
export default {
    /** 城市列表
    *   params以Query String拼接到url
    */
    cityList: params => {
        return instance.get("/city/list", {
            params: params 
        });
    },
    /** 用户信息
    *   data以json传输
    */
    userInfo: data => {
        return instance.post("/user/info", data); 
    },
    /** 订单列表
    *   data以Form Data传输
    */
    orderList: data => {
        return instance.post("/order/list", qs.stringify(data)); 
    },
}

外部调用

例如在某个vue文件里：

<script>
    import axios from "../../axios";
    export default {
        mounted() {
            axios.cityList({ id: 1 }).then(response => {
                // response（接口返回数据）
            });
            axios.userInfo({ id: 1 }).then(response => {
                // response（接口返回数据）
            });
            axios.orderList({ id: 1 }).then(response => {
                // response（接口返回数据）
            });
        }
    };
</script>
<template></template>
<style scoped></style>

完。