配置选项对象 axios的二次封装(vue-cli2)

一、配置选项对象

在config文件夹里面的index.js文件里的 module.exports 的 dev 下面的proxyTable

proxyTable: {  //跨域代理
      "/api":{ //地址
        target:"http://admintest.happymmall.com/manage", //基地址
        changeOrigin:true,//允许转发
        pathRewrite:{ //路径重写
          "^/api":""
    }
  }
},

axios的二次封装      封装成一个公共的函数  公布出来  函数返回一个promise对象  在promise对象resolve返回接口数据
utils目录下   request.js

前提理解     axios({可配置选项对象})

import axios from "axios"

// axios的二次封装      封装成一个公共的函数  公布出来  函数返回一个promise对象
const service = axios.create({
//如果配制了选项对象 这里就可以 不用写了
	// baseURL:'/api',
	// timeout:3000
})

// axios拦截器  请求拦截  响应拦截
service.interceptors.request.use((config) =>{
	// // 判断登录成功  请求头中添加token
	// if (store.getters.token) {
	//     // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
	//     config.headers['token']
	// }

	return config 
})
service.interceptors.response.use((config) =>{
	//响应拦截的具体逻辑

	return config 
})

// 封装成一个公共的函数  公布出来  函数返回一个promise对象
// params  是形参对象    接收的是实参-对象  
let Request = (params) =>{
	// console.log(params)
	return  new Promise((resolve,reject) =>{

		// axios({
		//     url: baseURL+url,
		//     method: "get" || "post" ,
		//     // get传参
		//     params:{
		//         username:"admin",
		//         passwrod:"admin"
		//     },
		//     //post传参
		//     data:{
		//         username:"admin",
		//         passwrod:"admin"
		//     }
		// })

		service({
			...params //es6中对象解构赋值   
		}).then((res) =>{
			// console.log(res)
			resolve(res)
		}).catch((err) =>{
			reject(err)
		})

	})
}

export { Request}

三、封装接口

在另一个js文件里 首先需要引入

import { Request } from "../utils/request"

统一的接口配置文件： 便于后期的修改、维护

// 登录接口;
//有数据的方式
export  const login =  (obj) => Request({
	url: "/api/user/login.do",
	method:"post",
	params:obj
})

// 主页数据
//没有数据 就可以这样
export  const home =  () => Request({
	url: "/api/statistic/base_count.do",
	method:"get",
	
})