vuevuecliaxios封装

封装axios可以更好的维护请求地址改变后更好修改下面上代码

1.在src目录下创建一个文件夹建议起名utils

2.如上图所示创建三个js文件我们先来写http.js的内容

import axios from "axios";
const http&＃61;axios.create({baseURL:&＃39;/api&＃39;, //配置公用地址withCredentials:true, //跨域是否携带tokentimeout:5000 //响应延迟时间
})
//设置请求拦截器
http.interceptors.request.use(config &＃61;> {//可以设置token login config.headers.mytoken &＃61; &＃39;nihao&＃39; //设置响应头return config
}, err &＃61;> {console.log(err)
})
//设置响应拦截器
http.interceptors.response.use(res &＃61;> {//可以设置响应的状态码&＃xff0c;关闭loginreturn res &＃61; res.data //拦截处理响应结果&＃xff0c;直接返回需要的数据
}, err &＃61;> {console.log(err)
})export default http //抛出http


3.现在我们写api.js的内容

import api from "./http";
//这里引入http在这里可以接收请求地址请求方式以及参数
export default function requests({method&＃61;&＃39;get&＃39;,url&＃61;&＃39;&＃39;,data&＃61;{},params&＃61;{}}){//把api返回出去return api({method,url,data,params})
}


4.最后一个是统一管理请求的js文件

//引入api这里是所有请求的管理
import req from &＃39;./api&＃39;
//home页面请求在首页可以import引入gethome方法获取数据后面可以传递地址参数请求方式
export const gethome&＃61;()&＃61;>req({url:&＃39;home/shejishi&＃39;})


5.在页面引入gethome获取数据

<script>
//引入获取home页面的方法
import { gethome } from "../utils/req";
export default {name: "Home",mounted() {gethome().then(res&＃61;>{console.log(res);})},components: {},
};
</script>