2021-01-21 axios封装

image.png

axios/index.js

import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import router from '../router';
import store from '../store'
import formatter from '@/store/formatter.js'

const root = process.env.API_ROOT;//配置的接口域名
let cancel;

// 创建axios实例
let instance = axios.create({
    baseURL: root,//基地址(一定是要抽象成公共配置的)
    timeout: 60000,//超时时间
    // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    transformRequest: [function (data) {
        // `transformRequest` 允许在向服务器发送前，修改请求数据
        if (data) {//有data的才能设置，不然会报错;data  :body数据;是一个对象(put patch post请求才能使用)
            data.token = localStorage.getItem('token') || Cookie.getCookie('token');
            let userInfo = store.state.userInfo
            if (userInfo) {
                data.login_company_id = userInfo.company_id;
                data.login_user_id = userInfo.user_id;
                data.fixed_province = userInfo.setlocale || localStorage.getItem('local_province');
            }
        }
        //qs.stringify()将对象 序列化成URL的形式，以&进行拼接
        return qs.stringify((data))
    }],
    headers: {//请求头
        "Content-Type": "application/x-www-form-urlencoded",
    },
})

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        // const token = localStorage.getItem('token') || Cookie.getCookie('token');
        // token && (config.data.token = token);
        // console.log(cancel)
        if (typeof (cancel) === 'function') {
            cancel('强制取消了请求')
        }
        config['cancelToken'] = new axios.CancelToken(function (c) {
            cancel = c
        })
        return config;
    },

    error => Promise.error(error)
)
// 响应拦截器
instance.interceptors.response.use( // 请求成功
    res => {
        cancel = null
        if (res.status == 200) {
            if (res.data.message == 'token值有误') {
                localStorage.removeItem('token')
                Cookie.delCookie('token')
                router.push('/homepage?')
            } else if (res.data.message == '权限受限') {//没有权限
                router.push('/homepage')
            } else {
                return Promise.resolve(res.data)
            }
        } else {
            return Promise.resolve({status:'error','message':'服务器错误'})
        }
        // return res.status === 200 ? Promise.resolve(res.data) : Promise.reject(res)
    },
    // 请求失败        
    error => {
        if (axios.isCancel(error)) {
            // console.log("取消上一个请求")
            // 中断promise链接
            return new Promise(() => { })
        } else {
            cancel = null
            // 把错误继续向下传递
            const { response } = error;
            if (response) {
                // 请求已发出，但是不在2xx的范围  
                errorHandle(response.status, response.data.message);
                return Promise.resolve({status:'error','message':'服务器错误'})
            } else {
                errorHandle('500', '服务器错误');
                return Promise.resolve({status:'error','message':'服务器错误'})
            }

        }

    });

/**
 * 封装get方法
 * 封装的方法里不用再处理error,响应拦截器里已经处理
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        })
            .then(res => {
                return resolve(res)
            })

    })
}

/**
 * 封装post方法
 * 封装的方法里不用再处理error,响应拦截器里已经处理
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data)
            .then(res => {
                return resolve(res)
            })
    })
}


/** 
 * 请求失败后的错误统一处理  
 * @param {Number} status 请求失败的状态码
 * @param {String} message 请求失败的提示消息
 **/
const errorHandle = (status, message) => {
    // 状态码判断     
    switch (status) {
        case 404:
            router.push('/notfound') //跳转到404
            break;
        default:
            let res = { 'status': 'error', message: `服务器错误(${status})` }
            formatter.rewriteMessage.error(res.message)
            return window.Promise.reject(res)

    }
}

export { instance }

api/index.js

/**
  * api接口的统一出口
  */

import tender from '@/api/tender';//交易相关
import people from '@/api/people';//人员相关

// 导出接口
export default {
  tender,
  people
}

api/people.js

/**
 * 人员模块相关接口列表
 */

import { post } from '@/axios/index'; // 导入axios/index中创建的axios实例

const  people= {
   searchPeople(params) {
       return post(`/firm/people/searchPeople`, (params));
   }
}

export default people;

api/base.js

/**
  * 接口域名的管理
  */
 const base = {
   
    baseUrl: 'https:',
    baseUrl2: 'https:',//如果有些接口用的不是同一个域名，可以在此配置
}

export default base;

main.js

import api from './api' // 导入api接口
Vue.prototype.$api = api;

使用

this.$api.tender.transactionInformation(params).then((res) => {
      this.loading = false;
      this.tableData = res.rows || [];
      this.total = res.total || 0;
      this.getRequestPageLog(params);
});