axios封装和apis的抽取

124 阅读1分钟

安装axios

npm i axios

/src下新建request文件夹,并新建index.ts

import axios from "axios"  
// 创建axios实例  
const instance = axios.create({  
// 基本请求路径的抽取  
baseURL:"http://xue.cnkdl.cn:23683",  
// 这个时间是你每次请求的过期时间,这次请求认为20秒之后这个请求就是失败的  
timeout:20000  
})  
// 请求拦截器  
instance.interceptors.request.use(config=>{  
return config  
},err=>{  
return Promise.reject(err)  
});  
// 响应拦截器  
instance.interceptors.response.use(res=>{  
return res.data  
},err=>{  
return Promise.reject(err)  
})
export default instance

/src/request下新建api.ts

// 统一管理项目中所有的请求路径 api  
import request from "./index"  
// 验证码请求  
export const captchaAPI = () => request.get("/prod-api/captchaImage");

Login.tsx中

import { captchaAPI } from "@/request/api.ts"  
// 点击验证码图片的事件函数  
const getCaptchaImg = ()=>{  
 captchaAPI().then(res=>{ console.log(res); // 划红色曲线警告
})