axios二次封装模板

本当迷

2022 年 10 月 14 日

995 次浏览

暂无评论

1273字数

前端开发

## axios中文文档：

[https://www.axios-http.cn/](https://www.axios-http.cn/)

## 安装axios:

```js
npm install --save axios
```

## 二次封装axios：

```js
//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";

//1.利用axios对象的方法create,去创建一个axios实例
//2.requests就是axios,只不过稍微配置一下
const requests = axios.create({
	//配置对象
	//基础路径，发请求的时候，路径当中会出现api，不用你手写
	baseURL:'/api',
	//请求时间超过5秒
	timeout:5000
});
 //请求拦截器:在发请求之前，请求拦截器可以检测到,可以在请求发出去之前做一些事情
 requests.interceptors.request.use((config)=>{
 	//config是个配置对象，对象里面有一个属性很重要，headers请求头
 	return config;
 });
 
 //响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
 requests.intercetors.response.use((res)=>{
	//成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情。
	return res.date;
},(erroe)=>{
	return Promise.reject(new Error('错误信息:' + error))
});
//对外暴露requests(axios的二次封装)
export default requests;
```

## 封装Api：

```js
// 当前这个模块: api进行统一管理
import requests from "@/api/request";

// 三级联动接口 /api/product/getBaseCategoryList get 无参数

// 发送请求：axios发送请求返回结果为Promise对象
export const reqCategoryList =
    () => requests({url:'/product/getBaseCategoryList', method:'get'})
```

## 调用：

```js
import {reqCategoryList} from "@/api";
async categoryList() {
        let result = await reqCategoryList()
  
}
```

最后修改：2022 年 10 月 15 日