vue cli axios封装

1. 在根目录新建vue.config.js

module.exports={
	devServer:{
		open:true,
		proxy: {
		   '/member': {
		       target: "https://www.xxxx.com",//设置你调用的接口域名和端口号 别忘了加http
		       changeOrigin: true,
		   },
	}
	 
}}

2. 新建utils 文件夹 request.js文件

import axios from 'axios'
//qs parse 把序列化数据转为对象，stringify()把对象转为序列化数据
import qs from 'qs'
//process.env  webpack的全局环境变量,产品|开发环境判断 根据不同的环境，设置不同的baseurl
const BASEURL=process.env.NODE_ENV==='production'?'https://www.xxx.com':'';
//创建axios实例  设置基础url和超时时间
let request=axios.create({
	baseURL:BASEURL,
	timeout:5000
})
//发起请求拦截 添加token头信息
//use 两个回调函数，第一个代表正确reslove,第二个回调函数代表错误reject
//Promise.reject 再一次向上一级抛出一个reject错误
//发送请求前请求头headers添加token头信息
//每当axios发起请求时候，先执行use里面的回调函数 比如每次发起ajax请求 添加token，添加用户名 到header头信息里面
request.interceptors.request.use(
	config=>{config.headers.token=localStorage.getItem("token");return config},
	err=>Promise.reject(err)
)
// 响应请求拦截
request.interceptors.response.use(
	res=>{
	//写一些业务逻辑，关闭加载提示，301 404 500等错误响应
		return res;
	},
	err=>Promise.reject(err)
)
//// request是有方法 也是 对象 对象的属性是可以动态的添加（动态添加了一个方法叫postURL）
//添加一个 postURL方法,
// 最终返回的 当执行 postURL这个方法是最终返回的Promise对象的实例 
// prosmie对象的实例 有两个结果 .then .catch（异步拿到-等待任意时间获取） 回调函数 成功 
// .then 异步获取到 reslove 返回的数
// .catch 获取到 reject返回的 错误信息
request.postURL=function(url,data,options={}){
	return new Promise(function(reslove,reject){
		request({
			url:url,
			method:"POST",
			data:qs.stringify(data),
			...options,
			headers:{"Content-Type":" application/x-www-form-urlencoded; charset=UTF-8",...options.headers}
		})
		.then(res=>reslove(res))
		.catch(err=>reject(err))
	})
}
export default request;

3. 创建api文件夹 新建user.js

import request from '@/utils/request.js'
//登录
function Login(data){
	return request.postURL("/member/login.php",data)
}
//注销
function Exit(){
	return request.postURL("/member/login.php")
}
//获取用户信息
function getUser(){
	return request.get("/member/ajax.php")
}
export{
	Login,
	Exit,
	getUser
}

• 例
• 登录

login(){
				Login(this.user)
				.then(res=>{
					//设置token在localstroge
					if(res.data.status==1){
						localStorage.setItem("token",res.data.token)
						this.$router.replace("/user")
					}
				})
			}

• 获取信息

getUser(){
				getUser()
				.then(res=>{
					this.user=res.data
					console.log(this.user)
				})
			},
			

• 注销

logout(){
				Exit()
				.then(res=>{
					if(res.data.status==1){
						this.user={}
						localStorage.removeItem("token")
					}
				})
			}