前端-封装axios的简单步骤

一、axios 封装

1. 在根目录创建 utils 文件夹
2. 创建 request.js文件
3. 在request.js里引入 axios
4. 配置 基本路径和超时时间
5. 配置请求拦截和响应拦截
6. 在请求拦截里可以放 loading 和 token
7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典
8. 最后把我们封装的 axios 实例 导出

详细代码如下：

封装request.js 代码

 import axios from "axios";
 const instance = axios.create({
 	baseURL: "",
	timeout: 5000,
 });

instance.interceptors.request.use(     //请求拦截的成功和失败
	 (config) => {
		return config	
	 },
	 (err) => {
		Promise.reject(err);
	 }
)


instance.interceptors.response.use(  //相应拦截的成功和失败
	 (res) => {
	  return res;
	 },
	(err) => {
		Promise.reject(err);
	 }
);

export default instance;

封装api.js 代码

第一种方法：
import http from "./request";
async function getXXX() {
	let { data } = await http.get("");
	return data;
}
// es7处理http请求的方法
//async 函数return的值永远是一个promise对象

第二种方法：
let getXXX = () => {
   return http.get("");
};
//es6的处理
//没有用async 就相当于是直接把我们的http这个对象return出去

export { getXXX };