vue中axios二次封装并发起网络请求配置

1.安装axios

npm i axios

 

 

 2.导入

//对axios进行二次封装
import axios from "axios"// 创建axios实例，其实request就是axiosconst requests =axios.create({//   发请求的时候自动出现api// baseURL:"api",//   请求超时的时间timeout:5000,
})// 请求拦截器，
requests.interceptors.request.use((config)=>{// config对象可以添加headers请求头}
// 响应拦截器
requests.interceptors.response.use(config=>{// 成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到return config.data
},error=>{console.log(error);return Promise.reject(new Error("fail"))
})export default requests

3. 接口统一管理

说明：项目小可以在组件的生命周期函数中发请求。create组件

3.1index.js

说明：导入封装好的axios

import requests from "./request";// 三级联动的接口;对外暴露函数，页面导入使用就行了
export const reqCatgoryList = () => {// 返回发请求return requests({ url:"/list/api/product/getBaseCategoryList", method: "GET" });
};

3.2跨域问题

说明：JSONP、CROS、代理。下面配置代理模式

module.exports = {// 关闭eslintlintOnSave: false,devServer: {proxy: {"/list": {target: "http://gmall-h5-api.atguigu.cn",ws: true,changeOrigin: true,pathRewrite: { "^/list": "" },secure: false,},},},
};