1.在src文件中新建untils文件夹 新建axios.js文件
import axios from 'axios';
//设置axios
const service=axios.create({
timeout:1000*60,
baseURL:'/api',//对axios发送的请求路径进行集中设置
//意思是在接口路径前加上/api
//这里的 /api 是和vue.config.js中proxy 中设置的对应
})
//封装post请求
let post=function(url,data_={}){
return new Promise((resolve,reject)=>{
service.post(url,data_).then((res)=>{
return resolve(res)
}).catch((err)=>{
return reject(err)
})
})
}
//封装get请求
let get=function(url,params){
return new Promise((resolve,reject)=>{
service.get(url,{params}).then((res)=>{
return resolve(res)
}).catch((err)=>{
return reject(err)
})
})
}
//请求拦截
service.interceptors.request.use(config=>{
//添加请求头
config.headers={
"Authorization":localStorage.token
}
return config
},err=>{
return Promise.reject(err)
})
//添加响应拦截
service.interceptors.response.use(res=>{
return res.data
},err=>{
return err
})
export default{
post,
get
}
2.对请求方法进行二次封装
- 2.1 在src中新建api文件
- 2.2在api文件夹中新建文件 最好每个表格的接口写一个文件
//引入封装好的axios
import axios from '@/untils/axios';
//添加分类
function add_(data){
return axios.get('/goodstype/add',data)
}export{
add_ as add,
}
3.在vue文件中使用接口
import { add } from "@/api/goods";
async function(){
let res=await add({
//需要传的参数
})
}
