Axios封装（Vue，React）

1、创建实例和请求和响应拦截器（reques.js）

/* jshint esversion: 6 */
import axios from "axios";
// 创建axios实例
const service = axios.create({
    baseURL: "https://202.61.90.32/", //开发环境
    // baseURL: " ", // 打包
    timeout: 15000, // 请求超时时间,
});
// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        //.....请求前处理.添加统一参数，如Token和时间戳
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    function(response) {

        return Promise.resolve(response); //异步
    },
    function(error) {
    // 请求失败、错误处理回调
        let originalRequest = error.config;
        if (error.code === "ECONNABORTED" && error.message.indexOf("timeout") !== -1 && !originalRequest._retry) {
            console.log("登录超时");
        }
        return Promise.reject(error); //异步
    }
);
export default service;

2、封装API文件,统一管理接口地址（api.js）

/* jshint esversion: 6 */
import request from "./request";
let ApiVersion="v1"; //版本控制

//Post请求----添加
export function userAddPost(data) {
    return request({ url: ApiVersion + "/user", method: "post", data: data, });
}

//Put请求----修改
export function userChangePut(data) {
    return request({ url: ApiVersion + "/user", method: "put", params: data });
}

//Delete请求----删除
export function userDelDelete(data) {
    return request({ url: ApiVersion + "/user", method: "delete", params: data });
}

//Get请求----查询
export function userListGet(data) {
    return request({ url: ApiVersion + "/user", method: "get", params: data });
}

3、Vue 使用

<script>
    import { userListGet } from "./api"; // 引入接口
    export default {
        mounted() {
            this.api_userListGet();  // 获取用户列表
        },
        methods: {
            // 查询用户列表
            api_userListGet() {
            	let prams={
					page:1, //当前页
					size:10 //每页显示条数
				}
                userListGet(prams).then(response => {
                    let back_data = response.data;

                });
            },
        }    
    }
</script>

4、React 使用

import { userListGet, } from "../../service/api"; // 引入接口
componentWillMount(){
    this.api_userListGet();
},
api_userListGet() {
    let prams={
		page:1, //当前页
		size:10 //每页显示条数
	}
    userListGet(prams).then((response )=>{
        let back_data=response.data;
    })
}