Vue使用——axios封装

背景

• 在前端Vue项目中，需要自定义axios请求拦截器。

配置

• 建立js文件：axiosUtil.js,文件内容如下

import axios from 'axios';
import ElementUI from 'element-ui';

const service = axios.create({
    // baseURL: 'https://www.easy-mock.com/mock/test',
    timeout: 200000
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        console.log('config', config)
        // 在发送请求之前做些什么
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

//响应拦截器
service.interceptors.response.use(
    response => {
        console.log(response)
        const res = response.data
        // 200是自定义的状态码，根据实际情况定义
        if (res.statusCode !== 200) {
            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })

            /* 此处还可以写一些其他的逻辑处理 */
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error)
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service;

• 封装api，使用axiosUtil.js进行接口封装（举例：farmApi.js）

import axios from 'axios';
import base from './base.js';
import storage from '../utils/storage.js';
import axiosUtil from '../utils/axiosUtil.js';/**
 * 增加农场
 * @param {*} data 
 * @returns 
 */
export const addFarm = (data) => {
    return axiosUtil({
        method: 'post',
        url: base.mms + '/farm/save',
        data: data,
        headers: {token:storage.get('token')}
    })
}

/**
 * 删除农场
 * @param {*} data 
 * @returns 
 */
export const delFarm = (data) => {
    return axiosUtil({
        method: 'get',
        url: base.mms + '/farm/delete',
        params: data,
　　　　 headers: {token:storage.get('token')}

　　}) 
}

• 使用api，进行接口调用