Vue js封装接口
天梦星服务平台 (tmxkj.top)
https://tmxkj.top/#/
1.安装axios
npm install axios -g2.在src下新建一个Api文件夹,再创建一个js文件
import axios from 'axios'
let configuration = {url:"http://localhost:9090"
}
/*** 请求项目数据的请求体*/
async function http({ url, method, param }) {const httpUrl = configuration.url + urlif (method === 'GET') {httpUrl + jsonToGetParams(param)}const { data } = await axios({url: httpUrl,method: method ? method : 'GET',data: method === 'GET' ? {} : param,headers: {'content-type': 'application/json',token: localStorage.getItem('token') || ''}})return data
}
async function ask(e) {return http({url: e[0],method: e[1],param: e[2]})
}
export { ask }/*** GET参数转字符串* @param jsonObj* @returns {string}*/
function jsonToGetParams(jsonObj) {const params = Object.entries(jsonObj).map(([key, value]) => `${key}=${value}`).join('&')if (params.length >= 1) {return '?' + params} else {return params}
}
3.在src下新建一个Interface文件夹,里面单独存放接口，用户接口就创建UserApi.js文件，文件接口就创建FileApi.js
import {ask} from "../Api/requestBody";/*** 查询用户接口*/
export function getQueryUser(param){return ask(['/user/queryUser','GET',param]);
}
4.来到vue页面调用
getQueryUserFun(){getQueryUser({id:"2222"}).then(res=>{console.log(res)})}