vue3+ts+axios请求封装

1.首先安装axios

  1. npm install axios

2.request.ts统一封装的请求接口(本人是在utils里面新建 request.ts)

  1. import axios from 'axios'
  2. import { ElMessage  } from 'element-plus'
  3. // import { getToken } from '@/utils/auth'
  6. export  const request =(options:any)=> {
  7.   return new Promise((resolve, reject) => {
  8.     // create an axios instance
  9.     const service = axios.create({
  10.       // baseURL: process.env.BASE_API, // api 的 base_url
  11.       baseURL: '/api',
  12.       timeout: 80000 // request timeout
  13.     })
  15.     // request interceptor
  16.     service.interceptors.request.use(
  17.       (config:any) => {
  18.         let token:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
  19.         if (token) {
  20.           // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
  21.           config.headers['X-Token'] = token
  23.           config.headers.Authorization =  + token       
  24.          }
  25.         return config
  26.       },
  27.       error => {
  28.         // Do something with request error
  29.         console.log("出错啦", error) // for debug
  30.         Promise.reject(error)
  31.       }
  32.     )
  34.     // response interceptor
  35.     service.interceptors.response.use(
  36.        (response:any) => {
  37.         return response.data
  38.       },
  39.       error => {
  40.         console.log('err' + error) // for debug
  41.         if(error.response.status == 403){
  42.           ElMessage.error('错了')
  43.         }else{
  44.           ElMessage.error('服务器请求错误，请稍后再试')
  45.         }
  46.         return Promise.reject(error)
  47.       }
  48.     )
  49.     // 请求处理
  50.     service(options)
  51.       .then((res) => {
  52.         resolve(res)
  53.       })
  54.       .catch((error) => {
  55.         reject(error)
  56.       })
  57.   })
  58. }
  59. export default request

跟js一样的写法啦，就是把ts类型加上

3.调用api -service

  1. import {request} from '@/utils/request'
  3. // 调用测试
  4. export function getTest() {
  5.     return request({
  6.       url: '/xxxxx/',//此处为自己请求地址
  7.       method: 'get'
  8.     })
  9.   }
  10. 4.调用过程为页面引入api文件，再由api调用统一的请求函数请求数据
  11. import { getTest} from "@/service/test";
  12.     onBeforeMount(() => {
  13.         getTest()
  14.             .then(response => {
  15.             console.log("结果", response);
  16.         })
  17.             .catch(error => {
  18.             console.log('获取失败！')
  19.         });
  20.     })

这些的前提是配置了代理转发。