一、简单用法使用axios
1.npm安装aixos依赖
npm install axios
2.引入axios
import axios from 'axios'
3.简简单单使用axios
axios.get(`http://localhost:3000/userinfo?_page=${page.value}&_limit=${page_num.value}`)
.then((res) => {
relist.value = res.data
console.log(relist.value)
})
二、稍微复杂一点的用法 封装axios
1.同上安装依赖,引入axios
2.在项目里新建一个文件夹,文件夹下创一个request.js文件
import axios from 'axios'
import type { AxiosResponse, AxiosRequestHeaders } from 'axios'
import baseConfig from '@/config'
import { getToken } from '@/utils/auth'
//请求的公共地址部分
axios.defaults.baseURL = baseConfig.BASE_URL
//请求超时时间,超过这个时间还未取得结果,提示用户请求超时
axios.defaults.timeout = baseConfig.TIMEOUT
//创建请求拦截器
axios.interceptors.request.use(function (config) {
(config.headers as AxiosRequestHeaders).Authorization = `Bearer ${getToken()}`
// 在发送请求之前做些什么
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 添加响应拦截器
axios.interceptors.response.use(
function (response: AxiosResponse) {
// 对响应数据做点什么
return response.data
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error.response?.data)
}
)
//暴露aixos
export default axios
3.封装接口 在项目里创一个api的文件夹,在里面创建相关api文件,如服务请求可以创建成service.js
//引入第2步创建的request.js
import request from '@/utils/request'
//从配置中获取业务的地址
import {businessConfig} from '@/config/config'
const basePath = businessConfig.businessBaseUrl
//TS定义类型
export interface PageListType {
pageNum?: number
pageSize?: number
condition: {
serviceName: string
isDisable:string
terminal:string
serviceType:string
order:string[]
}
}
export interface SearchListType {
deviceId: string
problemType: string
organ: string
}
// // 获取分页列表
export const problemPageList: (data: PageListType) => Promise<[]> = (
data: PageListType
) => {
return request({
url: basePath + '/keynote/resource/find/page',
method: 'post',
data: data
})
}
// // 导出
export const resourceExport = (data: FilterDataType) => {
return request({
url: basePath + '/keynote/resource/export',
method: 'post',
responseType: 'blob',
data
})
}
4.在具体页面组件中使用
4.1引入第3步封装好的api接口
import { resourceExport,PageListType,problemPageList } from '@/api/keynote/service'
4.2具体使用封装好的problemPageList方法
const getData = async () => {
const payload: PageListType = {
pageNum: pager.currentPage,
pageSize: pager.pageSize,
condition: {}
}
// 分页信息列表 payload参数是请求的参数
const res = await problemPageList(payload)
//对拿回来的数据进行处理
tableData.value = res.data.list
pager.total = res.data.total
pager.pageCount = Math.ceil(pager.total / pager.pageSize)
}