axios的二次封装及调用
axios的二次封装以及调用的详细步骤
·
目录
一、axios的封装
1、安装axios
npm i axios --save-dev
2、在根目录下创建api文件夹,创建request.js文件进行封装
import axios from "axios";
let mes = window.location;
// 此部分视个人情况
// let _baseurl=''
// if(mes.hostname=='localhost'){
// _baseurl='/api/' 开发环境下
// }else{
// _baseurl='http:xxx' 生产环境下
// }
let _baseurl = `//${mes.hostname}:${mes.port}`;
const request = axios.create({
baseURL:_baseurl, //请求的地址
timeout: 30 * 1000, //请求超时时间:30秒
withCredentials: true // 表示跨域请求时是否需要使用凭证
});
// 请求拦截器
request.interceptors.request.use(
config => { //配置信息处理
return config;
},
error => { //错误处理
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
request.interceptors.response.use((res) => { // 请求成功的回调函数
// console.log(res);
// return res.data;
return res;
},(err) => { // 请求失败的回调函数
return Promise.reject('fail');
});
export default request;
3、在api文件夹下创建index.js文件
//导入request文件
import request from './request.js'
//测试接口 get
export function test(params) {
return request({
url: '/apptest',
method: 'GET',
params
})
}
// 测试接口 post
export function test(data) {
return request({
url: '/apptest',
method: 'POST',
data,
})
}
二:调用
async toLogin() {
let data={'test':'123'}
let res=await test(data);
}
更多推荐
已为社区贡献5条内容
所有评论(0)