对vue项目的api进行封装

1 为什么要将api封装起来?

• 方便对项目的api进行管理，可以快速的找到对应api的位置与对应的内容，方便进行修改等操作。

2 步骤

2.1 创建api文件夹,对api进行封装

• 在该文件夹内创建api相对于的js文件。
• 通promise的方式对api进行封装
• 注意：由于利用了对axios二次封装的部分，对于axios的封装详情看axios的二次封装

import request from '@/utils/request.js';
// 导入 request
/**
 * 获取用户信息 api
 * @return {Promise} 返回一个Promise
 * @description  获取用户信息api 成功返回用户信息，失败返回失败结果
*/
export const GetUserInfo = ()=>{
	return new Promise((resolve,reject)=>{
		request.get("/member/ajax_login.php")
		.then(res=>resolve(res))
		.catch(err=>reject(err))
	})
}
/**
 * 退出登录api
 * @return {Promise} 返回一个Promise 成功 {status:1,msg:'成功'} ；失败 {status:0,'退出失败'}
 * */
export const Exit=()=>{
	return new Promise((resolve,reject)=>{
		request.postURL("/member/index_login.php",{dopost:'exit'})
		.then(res=>resolve(res))
		.catch(err=>reject(err))
	})
}

2.2 如何在组件中使用封装的api

1. 导入封装的api ：import {GetUserInfo,Exit} from ‘…/…/api/index.js’
2. 在methods中调用api，获取数据

Exit({dopost:'exit'})
 			.then(res=>{
 				if(res.data.status){ //如果status为1
 				sessionStorage.removeItem("token") //删除token
 					this.userInfo = {}; //清空用户信息
 					this.$notify({ type: 'success', message: '退出成功' });
 					// 提示用户退出成功
 				}
 			})
 			.catch(err=>console.log(err))

GetUserInfo()
				.then(res=>{
					if(res.data){
						this.userInfo = res.data;
						// 获取到的用户信息赋值给 userInfo
					}
				})