vue3+Ts封装axios网络请求

1.安装axios

npm i axios

在package.json中检查axios是否安装成功

 "dependencies": {
    "axios": "^1.7.2",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },

2.新建文件

新建文件utils/request.ts

import axios from "axios";
const service=axios.create({
    baseURL:'http://localhost:3000',
    timeout:5000
})

service.interceptors.request.use(
    config=>{
        const token=localStorage.getItem('token')
        if(token){
            config.headers['Authorization']=`Bearer ${token}`
        }
        return config;
    },
    error=>{
        return Promise.reject(error);
    }
)
service.interceptors.response.use(
    response => {
      // 对响应数据做点什么
      return response.data;
    },
    error => {
      // 对响应错误做点什么
      console.error('Response error:', error);
      if (error.response) {
        // 这里可以处理HTTP状态码异常的情况
        switch (error.response.status) {
          case 401:
            // 未授权，跳转到登录页
            break;
          case 403:
            // 禁止访问
            break;
          case 404:
            // 资源未找到
            break;
          default:
            console.error('Unhandled error:', error.response.status);
        }
      }
      return Promise.reject(error);
    }
  );
  
  export default service;

新建文件api/user.ts

import request from "../utils/request";
const api_name='';
export default {
    getData(url:any,params:any){
        return request({
            url:api_name+url,
            method:'get',
            params
        })
    },
    postData(url:any,params:any){
        return request({
            url:api_name+url,
            method:'post',
            data:params
        })
    }
}

3.在指定文件引用并使用

 import getApi from '../api/user'

GET:

getApi.getData('http://jsonplaceholder.typicode.com/posts').then(res=>{
    console.log(res)
  })

POST:

getApi.postData('http://jsonplaceholder.typicode.com/posts',{"userId":1,"title":"sdf","body":"sdf"}).then(res=>{
    console.log(res)
  })

完成