统一封装axios,使用拦截器对接口做统一处理

封装axios=== request.js文件

1.根据需要引入模块

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import router from '../router'
import store from '../store';

2.创建一个axios实例

// 创建axios实例
//axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决 
const service = axios.create({
    //后台API地址（端口必须固定死）（生产环境开启）
    baseURL: process.env.BASE_API, // api的base_url
    timeout: 10000, // 请求超时时间
    withCredentials: true
})

3.使用request拦截器，对axios的配置做统一处理==也就是对请求做处理配置

// request拦截器
service.interceptors.request.use(config => {
    return config
}, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
})

4.reponse拦截器，对响应做处理配置

// respone拦截器
service.interceptors.response.use(
    response => {
        if (response.status == 200) {
            if (response.data.code) {
             //做相关处理
            } else {
                return response.data
            }
        } else {
            Message({
                message: response.data.msg,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(response.data.msg)
        }
    },
    error => {
        console.log('err' + error)// for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

5.将axios实例暴露出去，实现axios的封装

export default service

axios调用接口的方式===Api

import request from '@/utils/request'
export default function Api(url, method, data = {}, istransform = true, extra) {
    let requestObj = {
        url,
        method
    }
    if (method.toLocaleLowerCase() == 'post') {
        requestObj.data = data;
        if (istransform) {
            requestObj.transformRequest = [function (data) {
                var formData = new FormData();
                Object.keys(data).forEach((v, i, a) => {
                    formData.append(v, data[v]);
                })
                return formData;
            }]
        }
        if (extra && extra == 'blob') {
            //导出额外设置响应类型
            requestObj.responseType = extra;
        }
    } else if (method.toLocaleLowerCase() == 'get') {
        requestObj.params = data
    }
    return request(requestObj)
}

具体使用在接口

import Api from "./api"

export fucntion getPerission(){
	return Api('具体地址','get')
}

如果要调用该接口，直接引用在页面中就好。