vue3+ts封装axios

为什么要封装axios呢，直接使用不好吗。我个人浅显的认为，直接在页面中使用axios.get等发送请求，这样请求与页面的耦合度太高，如果要是修改某一个接口url，还要去页面找,太麻烦，因此，我们一般直接封装axios，把请求url与页面分开

我们开始封装axios吧

import axios,{ AxiosResponse, AxiosRequestConfig } from 'axios'
const isDev = process.env.NODE_ENV == 'development'
const request=axios.create({
  baseURL:isDev?'http://localhost:8080':'',
  timeout:30000,
})
//请求拦截器
request.interceptors.request.use((config: AxiosRequestConfig) => {
  if (config.headers) {
    config.headers.token = sessionStorage.getItem('token') || ''
  } 
  return config
},(error:any) => {
  return Promise.reject(error)
})
//响应拦截器
request.interceptors.response.use( (response:AxiosResponse) =>{
  return response.data
},(error:any) => {
  return Promise.reject(error)
})
export default request

在src目录下新建一个api文件夹，个人建议：文件名最好与vue页面文件名小写同名，以登录为例：建login.ts文件，在login.ts里面写登录页面的相关接口url
如果是get 方法就不用写method，默认就是get

import request from "@/utils/request";
export const postLogin = ((params:{username:string,password:string}) => {
  return request({
    url: '/user/login',
    method: 'post',
    data:params
  })
})

在登录页面使用

import { postLogin } from '../api/login'