1.安装axios
npm install --save axios
2.创建封装js
配置请求拦截器,可以在请求发送前进行统一预处理请求,
不用每次在请求的时候手动添加协议头 token 等配置
request.js
request.js
// axios二次封装
import axios from "axios";
// axios.create方法创建实例
const requests = axios.create({
// 配置基础路径
baseURL:"http://localhost:80/api",
//请求超时时间
timeout:5000,
});
// 请求拦截器
requests.interceptors.request.use(config => {
return config;
})
// 响应拦截器
requests.interceptors.response.use(res =>{
// res = 成功后的返回数据
return res.data;
},(error)=>{
// 响应时候后的回调
return Promise.reject(new Error("faile"))
}
)
export default requests;
3.创建统一管理Api接口js
index.js
index.js
// api统一管理
import requests from './request';
//获取用户信息 //发请求
export const getUser = ()=>requests({url:'/getinfo',method:'get',params:{email:"[email protected]"}});
如果有很多个接口,可以提前写在该文件,用的时候只需要写名称即可,例如上面的获取用户信息的接口
调用方式;
先引入,然后直接把定义接口的接口名字打出去即可。
import {getUser} from '@/api';
//定义一个方法,并在方法前面使用async
async function sta() {
// 接口前需要使用 await
console.log( await getUser());
}
//调用
sta()
标签:axios,封装,请求,request,接口,js,Vue,requests From: https://www.cnblogs.com/Hello233/p/16773385.html