简单使用axios和简单封装axios

一、简单用法使用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)

}