vue系列---【封装拦截器、封装axios的get post请求】
时间:2021-05-24 17:02:36
收藏:0
阅读:0
1、项目文件下src文件夹=>request文件夹=>http.js和api.js
http.js
// 封装拦截器 // 封装get post // 1.引入模块 import axios from "axios" import qs from "qs" import Vue from "vue" import router from "../router" import { alertMsg } from "../utils/alert" // 2.根据环境配置$pre //开发环境 8080 if (process.env.NODE_ENV == "development") { Vue.prototype.$pre = "http://localhost:3000" } //生产环境 3000 if (process.env.NODE_ENV == "production") { Vue.prototype.$pre = "" } // 3.请求拦截 携带token axios.interceptors.request.use(config => { let userInfo = localStorage.getItem("userInfo"); //如果有token,就加;如果没有,就不加 userInfo && (config.headers.authorization = JSON.parse(userInfo).token) return config; }) // 4.响应拦截 axios.interceptors.response.use(res => { //打印 console.log("请求地址:" + res.config.url) console.log(res); //失败弹信息 if (res.data.code !== 200) { alertMsg(res.data.msg) } //掉线处理 if (res.data.msg == "登录已过期或访问权限受限") { router.replace("/login") } return res; }) // 5. get /** * url:请求路径 eg:"/api/login" * params:请求参数 eg:{phone:"",password:""} */ /** 调用演示 get("/api/login",{phone:"",password:""}).then(d=>{ }) */ export let get = (url, params = {}) => { return new Promise((resolve, reject) => { axios.get(url, { params }).then(res => { resolve(res) }) }) } // 6.post /** * url:请求路径 eg:"/api/login" * params:参数 eg:{phone:"",password:""} * isFile:是否是文件 eg:是:true ;不是就不传 */ export let post = (url, params, isFile = false) => { let data = null; // 如果是文件,转FormData ;不是,就qs.stringify() if (isFile) { data = new FormData() for (let i in params) { data.append(i, params[i]) } } else { data = qs.stringify(params) } //返回 return new Promise((resolve, reject) => { axios.post(url, data).then(res => { resolve(res) }) }) }
api.js
import { get, post } from "./http" //登录 export let reqLogin = (user) => post("/api/login", user) //首页商品 export let reqHomeGoods = () => get("/api/gethortgoods") //一个商品 export let reqDetail = (params) => get("/api/getgoodsinfo", params) //加入购物车 export let reqAddShop = (params) => post("/api/cartadd", params) //购物车列表 export let reqShopList = (params) => get("/api/cartlist", params) //地址添加 export let reqAddressAdd = params => post("/api/addressadd", params) //地址列表 export let reqAddressList = params => get(‘/api/addresslist‘, params) //地址编辑 export let reqAdressEdit = params => post("/api/addressedit", params) //订单生成 export let reqOrderAdd = params => post("/api/orderadd", params)
评论(0)