一、简单封装
封装get请求
function ajax_get(url,params={}){
return new Promise(resolve => {
axios.get(url,{
params
}).then(r=>{
console.log(r.data);
resolve(r.data)
})
})
}
var getBanner = () => ajax_get(baseUrl + "/banner")
var getGoodList = data => ajax_get(baseUrl + "/goodList",data)
2.封装post请求
function ajax_post(url,params={}){
return new Promise(resolve => {
axios.post(url,params).then(r=>{
resolve(r.data)
})
})
}
将需封装好的请求export导出
export {
getBanner，
getGoodList
}
二、高级封装
1.配置axios
// http.js 这个文件是对axios请求插件的二次封装, 有的请求需要携带token，、可以把token携带的操作放在请求拦截的函数，也就是在发请求时候，先经过请求拦截追加token发给服务器，也可以对服务器响应进行进行优化再返回给客户端 可以设置请求的服务器地址，也可以设置超时时间等。
import axios from "axios"; // 导入原始的请求插件
// 有些post接口无法解析对象类型的请求参数, 可以使用qs模块(node内置模块)把对象类型的数据序列化为查询字符串结构 {name:lisi, age:10} ===> ?name=lisi&age=10
import qs from "qs"
// 请求数据时,展示请求的加载框, 使用element-plus组件库的加载组件
import { ElLoading } from 'element-plus'
let loading = null;
// 功能1 根据环境设置axios发起不同的服务器请求地址, 设置后,发起ajax请求不再拼接基础路径
if(process.env.NODE_ENV == "development"){
axios.defaults.baseURL = "/cige" // 开发环境的代理路径
}else if(process.env.NODE_ENV == "production"){
axios.defaults.baseURL = "https://lianghj.top:8888/api/private/v1" // 生产环境的原始路径 (项目打包时用这个路径)
}
//功能2 添加超时功能 设置超时时间, 请求超过30秒无响应就判定请求失败
axios.defaults.timeout = 30000 //30s
// 功能3 是否允许跨域请求携带Cookie, 前端设置了该属性为true时，后端需要设置Access-Control-Allow-Origin为前端项目的源地址，不可设置为*；
axios.defaults.withCredentials = true
// 功能4 在请求头设置(post)请求内容的编码格式
axios.defaults.headers["Content-Type"]="application/x-www-form-urlencoded"
// 功能5 把请求的参数由对象结构转化为查询字符串结构, 转换通过qs第三方进行转换 data就是请求参数
axios.defaults.transformRequest = data =>qs.stringify(data)
// 功能6 axios请求拦截 在发请求之前 对请求进行处理 一般把本地token添加到请求头里面执行登录认证, 这样在发请求时就不用考虑并处理token了
axios.interceptors.request.use(request=>{
// 请求时开始加载, target参数指定加载框显示的区域
if(!loading) loading = ElLoading.service({target:".refresh_box"})
// console.log("axios请求拦截",request); // config参数是请求的配置信息
let token = sessionStorage.getItem("token") //从本地取出token
// 登录授权 请求验证是否有token 需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌(具体字段由服务器后台定义)
token && (request.headers.Authorization=token)
return request
},error=>{
return Promise.reject(error) // 返回错误
})
// 功能7 axios的响应拦截, 可在这里对响应数据或响应头做处理
axios.interceptors.response.use(response=>{
if(loading) { // 响应时结束加载
loading.close();
loading = null;
}
// axios响应数据会封装到一层data字段中, 把data字段剥开,返回原始响应
return response.data
},error=>{
return Promise.reject(error)
})
// 功能8 显示请求时的加载框, 见请求拦截和响应拦截
// 最后,返回配置之后的axios
export default axios
封装请求
// 导入我二次封装的请求插件
import http from "./http"
// 登录
const postLogin = params => http.post('/login', params);
// 左侧菜单列表
const getMenus = () => http.get("/menus");
// 获取用户列表
const getUsers = params => http.get("/users", { params });
// 修改用户状态
const putUserState = params => http.put(`/users/${params.uId}/state/${params.type}`);
// 添加用户
const postAddUser = params => http.post("/users", params);
// 编辑用户信息
const putUserInfo = params => http.put(`/users/${params.id}`, params);
// 删除单个用户
const deleteUser = params => http.delete(`/users/${params.id}`);
// 分配用户角色
const putUserRole = params => http.put(`/users/${params.uid}/role`,params);
// 获取角色列表
const getRoles = () => http.get("/roles");
// 添加角色
const postAddRole = params => http.post('/roles', params);
// 编辑角色信息
const putRolesInfo = params => http.put(`/roles/${params.id}`, params);
// 删除角色
const deleteRoles = params => http.delete(`/roles/${params.id}`);
// 所有权限列表
const getRights = params => http.get(`/rights/${params.type}`);
// 删除角色指定权限
const deleteRightForRole = params => http.delete(`/roles/${params.roleId}/rights/${params.rightId}`);
// 图片上传地址
const uploadUrl = http.defaults.baseURL + "/upload";
// 图片上传
const postImg = formData => http({
url: "/upload",
method: "post",
headers: {
// 文件上传的请求头需要设置数据类型multipart/form-data
"Content-Type" : "multipart/form-data"
},
// 注意： 请求体中使文件数据， 不是对象， 不需要（qs）处理请求体
transformRequest: data => data,
data: formData // 文件数据要放到formData对象中
})
export{
.....
}
