创建一个axios实例化对象instance
var instance = axios.create({
/* 基础路径 */
baseURL: 'https://lianghj.top:8888/api/private/v1/',
/* 设置超时时间 */
timeout: 3000
});
请求拦截器
instance.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在，则统一在http请求的header都加上token，
// 这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
localStorage.token && (config.headers.Authorization = localStorage.token)
return config
},
error => {
return Promise.error(error)
})
响应拦截器
axios.interceptors.response.use(response => {
return response
}, error => {
return error
})
参数methdos默认值是get，path表示具体路径，post需要给data传参默认值是空对象， get请求需要给params传参默认值是空对象
export const httpServe = (path, params = {}, method = 'get', data = {}) => {
return new Promise((resolve, reject) => {
instance({
url: path,
params,
method,
data
})
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
/*这种调用的写法 必须要按照顺序 */
/* get请求的调用方法 */
/* httpServe('users',{name:'zhangsan'}) */
/* post请求的调用方法 */
/* httpServe('login',{},'post',{username:'admin',password:'123123'}) */
调用
import {httpServe} from '@/http/index.js'
/* 登录 */
export const loginPost = (path,data)=> httpServe(path,{},'post',data);
/* 左侧菜单列表 */
export const menusGet = (path,params)=> httpServe(path,params);
/* 用户列表 */
export const usersGet = (path,params)=> httpServe(path,params);
/* 添加用户 */
export const addusersPost = (path,data)=> httpServe(path,{},'post',data);
封装接口
首先创建一个idnex.js文件
import axios from 'axios'
var instance = axios.create({
/* 基础路径 */*
baseURL: 'url‘,
/设置超时时间 */timeout: 5000});
instance.interceptors.request.use(
config => {
localStorage.token && (config.headers.Authorization = localStorage.token)
return config
},
error => {
return Promise.error(error)
}
)
axios.interceptors.response.use(response => {
return response
},
error => {
return error
})
/* 参数methods默认值是get，path表示具体路径，post需要给data传参默认值是空对象 get请求需要给params传参默认值是空对象 */
export const httpServe = (path,params={},method="get",data={})=>{
return new Promise((resolve,reject)=>{
instance({
method,
url:path,
params,/* get方法 */
data/* post方法 */
})
.then(res=>{
resolve(res)
})
.catch(err=>{
reject(err)
})
})
}
然后创建request.js文件写方法
import {httpServe} from '@/http/index.js'
/* 登录 */
export const loginPost = (path,data)=>httpServe(path,{},'post',data)
/* 用户列表 */
export const usersGet = (path,params)=>httpServe(path,params)
/* 获取左侧菜单列表 */
export const menusGet = (path,params)=>httpServe(path,params)
/* 添加用户 */
export const addusersPost = (path,data)=>httpServe(path,{},'post',data)
