Axios 封装

请注意以下文件夹：

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

Axios封装：

1.安装axios
在项目终端下输入：

npm install axios --save

2.在main.js全局引入axios

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

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

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.dataresData.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);
}

例子：