封装一个 async / await 风格的 axios 模块拦截器,axios封装,http模块,ajax封装,微信小程序ajax封装,微信小程序请求拦截器封装

在新开始的前端项目里肯定会用到ajax请求,这里手把手的教你封装一个通用的全局http模块

首先新建一个文件夹 作为一个"模块",如下:

然后继续创建文件:

index.js 如下:

/**
 * 在这里导出你需要用到的api方法,apis里面的那些
 */
import apis from './wrapper';
/* 
这里是方便看业务模块里有哪些方法,除了就没啥用了
var str = '';
Object.keys(apis).forEach((key) => {
    // console.log(str += `,${key}`);
}); */

export const {
    //test 业务模块
    getTest,
    postTest,
    putTest,
    deleteTest

} = apis;

   interceptor.js   //拦截器 此处用的loading和提示,如果用了其他的UI框架 自行修改即可,思路都一样的;

这里需要安装axios 

npm i axios --save

muse-ui就不做详细介绍了,地址在这里https://muse-ui.org/ 

element-ui  : http://element-cn.eleme.io/#/zh-CN/component/loading

npm i element-ui -S

/***
 * Created by Simple on 2018/1/14 0014.
 * Http请求控制器模块
 * @description 后台返回数据如下 { code:200, data:[], msg:"success" }
 */

import axios from 'axios';
import router from '@/router/index';
import store from '@/store/index';
import conf from '@/common/base/config';
import { Loading, Message } from 'element-ui';

// axios 配置
axios.defaults.timeout = 15000; //请求超时

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? conf.productionUrl : conf.devUrl; //api的基础地址
// axios.defaults.baseURL = '/apis';

// 配置通用请求动画
let loading = null;
axios.interceptors.request.use(config => {
    config.headers.Authorization = store.getters.token;
    loading = Loading.service({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(255, 255, 255, 0)'
    });
    return config;
}, err => {
    loading.close();
    return Promise.reject(err);
});

// http response 拦截器
axios.interceptors.response.use(response => {
    let data = {};
    if (response && response.data) {
        switch (Number(response.data.code)) {
            case 200:
                data = response.data;
                break;
            case 401: // 401 清除token信息并跳转到登录页面
                Message.error({
                    message: '身份过期，请重新登录'
                });
                setTimeout(() => {
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                }, 1200);
                break;
            case 403: //无权限
                router.replace({
                    name: '/403',
                    query: { redirect: router.currentRoute.fullPath }
                });
                break;
            default:
                Message.error({
                    message: response.data.msg
                });
                break;
        }
    }
    loading.close();
    return data;
}, error => {
    loading.close();
    Message.error({
        message: '哎呀~ (ಥ﹏ಥ)网络又开小差了,请稍后刷新重试!'
    });
    return Promise.reject(error.response.data);
});

export default axios;

wrapper.js 内容如下:

/***
 * Created by Simple on 2018/1/14 0014.
 * mergedApis模块
 */

import axios from './interceptor';
import mergedApis from './apis';

const http = ({
    url = '/', // DEFAULT_URL
    method = 'get', // DEFAULT_METHOD
    ...rest // REST_CONFIGS { data, headers, ... }  [OPTIONAL]
}) => axios({
    url: `${url}`,
    method,
    ...rest
});

export default (() => {
    return Object
        .keys(mergedApis)
        .reduce((acc, apiKey) => {
            return {
                ...acc,
                [apiKey]: data => http(mergedApis[apiKey](data))
            };
        }, {});
})();

 

最后一个 再建一个apis文件夹(当然你也可以叫models);

到这里你已经完成80%的内容了:

接下来写apis里面的文件

apis/index.js 如下:

//在这里导入你的业务模块
import test from './test';

export default {
    ...test
};

apis/types.js 如下:

/**
 * 常量文件
 */

//服务名
export const API_TEST = '/test';

apis/test.js 如下:

/**
 * test 业务模块 1
 */
import { API_TEST } from './types';
export default {

    /**
     * get 方法
     * @param {*} data
     */
    getTest({ param }) {
        return {
            url: `${API_TEST}/api`,
            method: 'get',
            params: { param }
        };
    },

    /**
     * post 方法
     * @param {*} data
     */
    postTest(data) {
        return {
            url: `${API_TEST}/api`,
            method: 'post',
            data
        };
    },

    /**
     * put 请求
     * @param {*} data
     */
    putTest(data) {
        return {
            url: `${API_TEST}/api`,
            method: 'post', //method: 'put'
            data,
            headers: { method: 'PUT' } //这里看公司的需求,有的是在headers里面自定义的,如果没有这需求直接 改  method: 'put' 即可
        };
    },

    /**
     * delete 请求
     * @param {*} data 
     */
    deleteTest(data) {
        return {
            url: `${API_TEST}/api`,
            method: 'post', //method: 'delete'
            data,
            headers: { method: 'DELETE' } //这里看公司的需求,有的是在headers里面自定义的,如果没有这需求直接 改 method: 'delete' ,移除headers即可
        };
    },
};

好了,基本的封装没有问题了 我们去测试一下呢

在你需要用到的组件里这样写:

<template>
    <div></div>
</template>
<script>
import { getTest, postTest, putTest, deleteTest} from '@/http';
export default {
    data() {
        return {
            queryData: {
                param: '参数1'
            }
        };
    },
    created() {
        this.init();
    },
    methods: {

        async init() {
            const { data } = await getYunDong();
            if(data){
                //to do 
            }
           
        },

        async post(){
            const { code } = await postTest({ param: 1 });
            if(code === 200){
                //to do
            }
        },

        async put(){
            const { code } = await putTest({ param: 1 });
            if(code === 200){
                //to do
            }
        },

        async delete(){
            const { code } = await deleteTest({ param: 1 });
            if(code === 200){
                //to do
            }
        }
    }
};
</script>

vue项目的http封装源码在这里: https://github.com/langyuxiansheng/MyProject/tree/master/http

应用于项目:https://github.com/langyuxiansheng/base-vueadmin-client/tree/master/src/http

微信小程序的http模块封装源码在这里https://github.com/langyuxiansheng/MyProject/tree/master/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%B1%BB/%E9%80%9A%E7%94%A8http%E8%AF%B7%E6%B1%82%E6%A8%A1%E5%9D%97%2C%E6%A8%A1%E5%9D%97%E5%8C%96%E5%B0%81%E8%A3%85/http

好了快动手试试吧.有问题请留言或者@作者,谢谢支持o(￣︶￣)o~