当前位置： 首页>后端>正文

在Vue3脚手架中使用ts完成axios的封装

后端2024-05-03 22:32:49

安装axios

yarn add axios vue-axios

创建ts文件

在src目录下新建utils文件夹，并在utils文件夹里创建三个文件
我命名分别为

  • http.ts 用于对axios的请求和响应做拦截
  • request.ts 用于封装请求方式
  • api.ts 存放具体接口
    代码如下

http.ts

const baseURL = '';
import axios from 'axios'
const $http = axios.create({
    //设置默认请求地址
    baseURL,
    //设置请求超时时间
    timeout: 5000,
    //设置请求头
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '../store/index';

// 请求拦截器
$http.interceptors.request.use(config => {
    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
}, error => {
    return console.error(error);
})
//响应拦截
$http.interceptors.response.use(res => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
    if (res.status === 200) {
        return Promise.resolve(res);
    } else {
        return Promise.reject(res);
    }
}, error => {
    if (error.res.status) {
        switch (error.res.status) {
             //这里可以对响应状态码进行拦截，处理不同的状态展示不同的交互效果
            // 404请求不存在
            case 404:
                console.log('网络请求不存在')
                break;
        }
        return Promise.reject(error.res);
    }
})
// 别忘记了
export default $http

request.ts

//导入request.ts 目录下的$http
import $http from "./http";

export function get(url:string,params?:any) {
    return new Promise((resolve, reject) => {
        return $http({
            url,
            method: 'get',
            data: params
          }).then(res => {
            resolve(res)
          }).catch(error => {
            reject(error)
          })
    })
}

api.ts

export default {
    getAPI: (params?: any) => get('/api/xxx', params), 
}

哪里使用哪里搬

因为找了半天没找到全局注册的方法 就在具体的页面里直接引入使用了，如果有大佬看见这个文章，请教一下全局注册的方法，辛苦告知。

举个例子

在HomeView.vue里使用

import { onBeforeMount } from "vue";
import getAPI from "../utils/api";
export default {
  setup() {
    // 接口调用
    const getData = async () => {
      const res = await getAPI.getAPI()
      console.log(res)
    }
    onBeforeMount(() => {
      getData()
    })
    return {getData}
  }
}

部分内容来自网络，此文章是记录第一次使用ts封装在vue里使用axios的方法，作为自己的一个记录，也是给大家提供的一个分享，涉及到的原作者如果觉得被冒犯可以私聊我，我会下掉


https://www.xamrdz.com/backend/3bx1941391.html

相关文章：