Axios 封装 - 技术栈

请注意以下文件夹：

utils下的setToken.js 是token封装（封装 Token-CSDN博客）,service.js 是axios封装。

Axios封装：

1.安装axios

在项目终端下输入：

javascript 复制代码

npm install axios --save

2.在main.js全局引入axios

javascript 复制代码

import axios from 'axios'

Vue.prototype.$axios =axios   //挂载到原型，可以在全局使用

3.在service.js 写入以下内容：

javascript 复制代码

import axios from "axios";
import {getToken} from '@/utils/setToken.js'
import {Message} from 'element-ui'

const service = axios.create({
     baseURL:'/api' , // baseURL 会自动加在请求地址上
     timeout: 300
})

export async function request(method,url,headers, params,data){
    headers=headers||{};
    headers["token"] = getToken('token')
    return await new Promise((resolve, reject) => {
        service({url,method,params,data,headers})
        .then(res => {
            const resData=res.data
            resData.message=resData.message||'响应成功'; 
            // log('request',method,url,headers, params,data,resData);
            if(resData.code === 200) {
                resolve(resData);
                //  表格数据转换 
            }else{
                Message({message:resData.message, type:'warning'})
                reject(new Error(resData.message))
            }
        })
        .catch(err => {
            log('request',method,url,headers, params,data,err);
            Message({message: '响应失败' , type:'warning'})
            reject(err)
        })
    } )
}


/**
 * 发送GET请求
 * @param {String} url  请求地址
 * @param {Object} params 请求参数
 * @returns 
 */
export function  get(url, params){ 
    return request('get',url,{},params);
}
/**
 * 发送POST请求,没有报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @returns 
 */
export function post(url, params){ 
    return request('post',url,{},params);
}
/**
 * 发送POST请求,发送JSON报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function postJSON(url, params,data){ 
    return request('post',url,{'Content-Type': 'application/json;charset=UTF-8'},params,data);
}
/**
 * 送POST请求,发送From表单报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function postFrom(url, params,data){ 
    return request('post',url,{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},params,data);
}
/**
 * 发送POST请求,发送FromData报文体,上传文件可用
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function postFromData(url, params,data){ 
    var fromDate=new FormData();
    for(var key in data){
        fromDate.append(key,data[key]);
    }
    return request('post',url,{'Content-Type': 'multipart/form-data'},params,fromDate);
}
/**
 * 发送delete请求
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @returns 
 */
export async function del(url, params){ 
    return request('delete',url,{},params);
}
/**
 * 发送PUT请求,没有报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @returns 
 */
export function put(url, params){ 
    return request('put',url,{},params);
}

/**
 * 发送PUT请求,发送JSON报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function putJSON(url, params,data){ 
    return request('put',url,{'Content-Type': 'application/json;charset=UTF-8'},params,data);
}

/**
 * 送PUT请求,发送From表单报文体
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function putFrom(url, params,data){ 
    return request('put',url,{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},params,data);
}

/**
 * 发送PUT请求,发送FromData报文体,上传文件可用
 * @param {*} url 请求地址
 * @param {*} params 请求URL参数
 * @param {*} data 请求body参数
 * @returns 
 */
export function putFromData(url, params,data){ 
    var fromDate=new FormData();
    for(var key in data){
        fromDate.append(key,data[key]);
    }
    return request('put',url,{'Content-Type': 'multipart/form-data'},params,fromDate);
}

例子：