[JavaScript知识库]vue3+ts+axios请求封装

目录

1.首先安装axios

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

3.调用api -service

4.调用过程为页面引入api文件，再由api调用统一的请求函数请求数据

1.首先安装axios

npm install axios -S    

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

import axios from 'axios'
import { ElMessage  } from 'element-plus'
// import { getToken } from '@/utils/auth'


export  const request =(options:any)=> {
  return new Promise((resolve, reject) => {

    // create an axios instance
    const service = axios.create({
      // baseURL: process.env.BASE_API, // api 的 base_url
      baseURL: '/api',
      timeout: 80000 // request timeout
    })

    // request interceptor
    service.interceptors.request.use(
      (config:any) => {
        let token:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
        if (token) {
          // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
          config.headers['X-Token'] = token
       
          config.headers.Authorization =  + token       
         }
        return config
      },
      error => {
        // Do something with request error
        console.log("出错啦", error) // for debug
        Promise.reject(error)
      }
    )

    // response interceptor
    service.interceptors.response.use(
      response => {
        return response.data
      },
      error => {
        console.log('err' + error) // for debug
        if(error.response.status == 403){
          ElMessage.error('错了')
        }else{
          ElMessage.error('服务器请求错误，请稍后再试')
        }
        return Promise.reject(error)
      }
    )
    // 请求处理
    service(options)
      .then((res) => {
        resolve(res)
      })
      .catch((error) => {
        reject(error)
      })
  })
}


export default request

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

3.调用api -service

import {request} from '@/uitls/request'

// 调用测试
export function getTest() {
    return request({
      url: '/xxxxx/',//此处为自己请求地址
      method: 'get'
    })
  }

4.调用过程为页面引入api文件，再由api调用统一的请求函数请求数据

import { getTest} from "@/service/test";
   onBeforeMount(() => {
        getTest()
          .then(response => {
            console.log("结果", response);
          })
          .catch(error => {
            console.log('获取失败！')
          });
    })

效果：

这些的前提是配置了代理转发，如果没有配置代理转发直接请求的话提前配置，参照vue3.0+vite+elementPlus+ts项目搭建之三——使用proxy配置代理转发以及配置使用@路径引入_涂涂-CSDN博客_npm 设置代理

具体方法参阅axios官网

axios中文网|axios API 中文文档 | axios

其实跟vue2.x一样写法，只是js写法换成ts写法

vue2.x写法参照

vue 请求统一封装和调用_涂涂-CSDN博客_vue 请求封装