axios的二次封装

234 阅读1分钟

第一步:下载axios

npm install --save axios

第二步:在src目录下创建api文件夹,并在api文件夹下创建js主文件

//导入axios

import axios from "axios"

//创建axios实例

const request = axios.create({
//配置对象
    baseURL:"/api",
    timeout:5000,
})

// 添加请求拦截器 
axios.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么
   return config; 
}, function (error) { 
// 对请求错误做些什么 
return Promise.reject(error); 
});

// 添加响应拦截器 
axios.interceptors.response.use(function (response) { 
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么 
    return response;
}, function (error) { 
    // 超出 2xx 范围的状态码都会触发该函数。 
    // 对响应错误做点什么 
    return Promise.reject(error); 
});
// 5.导出axios实例
export default request;

进行接口的统一管理

在api文件下创建js文件,统一管理接口

//引入axios实例
import axios from "./request"
//测试接口
export const getData = () =>{
return axios({
    url:"xxx/xxx/xxx",
    method:"get",
})

导出axios接口在页面中使用

improt {getData} from "@/api/axios"

//调用axios请求

getData()