vue3 +ts 如何安装封装 axios

作者：肥晨

2023-04-13
江苏
本文字数：1515 字
阅读完需：约 5 分钟

以 vite 创建的项目，vue3使用axios。使用ts二次封装axios访问接口，并调用接口。

vue3安装封装axios，其实和 vue2 的大差不差。只是在 ts 和 js 上，有些区别。

为什么封装 axios

求头能统一处理
便于接口的统一管理
解决回调地狱
配置拦截器，给不同的实例配置不同的拦截器，支持以对象形式接受多个拦截器配置

安装 axios

npm install axios

复制代码

引入插件

在使用的文件中引入

import axios from "axios";

复制代码

封装 request

先在 src 下创建一个 utils 文件夹，并添加一个 request.ts 文件

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
class HttpRequest {    private readonly baseUrl: string;    constructor() {        this.baseUrl = 'http://localhost:8080'    }    getInsideConfig() {        const config = {            baseURL: this.baseUrl,// 所有的请求地址前缀部分(没有后端请求不用写)              timeout: 80000, // 请求超时时间(毫秒)            withCredentials: true,// 异步请求携带cookie            // headers: {            // 设置后端需要的传参类型            // 'Content-Type': 'application/json',            // 'token': x-auth-token',//一开始就要token            // 'X-Requested-With': 'XMLHttpRequest',            // },        }        return config    }
    // 请求拦截    interceptors(instance: AxiosInstance, url: string | number | undefined) {        instance.interceptors.request.use(config => {            // 添加全局的loading..            // 请求头携带token            return config        }, (error: any) => {            return Promise.reject(error)        })        //响应拦截        instance.interceptors.response.use(res => {            //返回数据            const { data } = res            console.log('返回数据处理', res)            return data        }, (error: any) => {            console.log('error==>', error)            return Promise.reject(error)        })    }
    request(options: AxiosRequestConfig) {        const instance = axios.create()        options = Object.assign(this.getInsideConfig(), options)        this.interceptors(instance, options.url)        return instance(options)    }}
const http = new HttpRequest()export default http

复制代码

封装接口

在 api 的文件夹中，新建一个 api 的 ts 文件。

注意：因为 get 请求的参数需要params，它是即将与请求一起发送的 URL 参数，为了简写采用了 ES6 的解构，就是把下面的 params 解构，只有 get 请求需要加多一层params。

其它请求，如 post 等请求等就不用解构，形参是什么都行。

案例

src 文件夹下新建 api 文件夹，新建 api.ts 文件，里面写你请求后台的接口，比如我这里的请求地址是/test, 加上 axios 的 baseURL,完整的请求路径就是 http://localhost:8080/test

import http from '../utils/request'//get有值export function getTest(params: any) {  return http.request({    url: '/test',    method: 'get',    params  })}
//get无值export function (params: any) {  return http.request({    url: '/test',    method: 'get',    params  })}

复制代码

使用

请求的组件上使用

import { ref, onMounted } from "vue";import { getFileList } from "../../api/index";
export default {  setup() {    onMounted(() => {      getTest().then((res: any) => {        console.log(res);      });    });  },};

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/eda294df908c3b3eb34bac006】。文章转载请联系作者。

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

vue3 +ts 如何安装封装 axios

为什么封装 axios

安装 axios

引入插件

封装 request

封装接口

案例

使用

肥晨

评论