关键词：
文章目录
以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);
);
);
,
;
vue3如何封装axios(代码片段)
1.下载axios npminstallaxios-S2.下载qs npminstallqs-S3.然后可以在文件夹下面创建相应的axios的文件比如index4.然后配置importaxiosfrom"axios";importqsfrom"qs";//axios.defaults.baseURL=''//正式//axios.default 查看详情
vue3封装axios请求(代码片段)
npm安装axiosnpminstallaxios创建http.js文件//引入axiosimportaxiosfrom"axios";//设置请求基准地址axios.defaults.baseURL="http://api.xxxx.xx/";//导出封装方法exportdefaultget(url,data)returnnewPromise((resol 查看详情
vue3如何封装axios(代码片段)
1.下载axios npminstallaxios-S2.下载qs npminstallqs-S3.然后可以在文件夹下面创建相应的axios的文件比如index4.然后配置importaxiosfrom"axios";importqsfrom"qs";//axios.defaults.baseURL=''//正式//axios.defaults.baseURL='http://test'//... 查看详情
vue3封装axios请求(代码片段)
npm安装axiosnpminstallaxios创建http.js文件//引入axiosimportaxiosfrom"axios";//设置请求基准地址axios.defaults.baseURL="http://api.xxxx.xx/";//导出封装方法exportdefaultget(url,params)returnnewPromise((resolve,reject)=>axios.get(url,params:params,).then(... 查看详情
vue3+typescript+axios封装（附带loading效果，...并携带跨域处理，...element-plus按需引入）(代码片段)
简单的6步即可完成：首先.在根目录创建vue.config.js里面配置跨域处理,然后在src下新建service目录，在目录中新建两个ts文件，一个为request.ts另一个为api.ts1.对vue.config.js进行一系列配置module.exports=//别名configureWebpack:... 查看详情
使用ts对axios的进行简单封装(代码片段)
1.安装axiosnpmiaxios2.在合适路径下新建request.ts（名称可随意），例如可以在项目的src下创建utils文件夹创建request.ts3.导入axios并创建axios实例//引入axiosimportaxiosfrom'axios'//使用指定配置创建axios实例constinstance=axios.... 查看详情
vite+vue3+ts实战项目，教你实现一个网页版的typora！(前端篇)(代码片段)
...端后端数据库markdown编辑器ide工具框架搭建生成目录框架安装tailwindcss安装element-plus并修改主题色安装v-md-editor安装vuex和vue-router安装axios并封装http请求引入所有依赖页面实现登录和注册页面编辑器页面websocket实现websocke 查看详情
ai问答：使用vue3组合式api和ts配置axios拦截器http错误状态(代码片段)
...com/api/\',timeout:1000,headers:Authorization:\'Bearersome-token\')//简单封装-getfunctionget(url:string)returnaxiosInstance.get(url).then(res=>console.log(res.data)returnres).catch(err=>console.log(\'Axioserror:\',err.message)returnerr)//暴露其他方法...returnget//...)然后，get、p... 查看详情
vue3实战教程（快速入门）(代码片段)
...规则6.2创建注册表单组件6.3在LoginRegister.vue中引入使用7.封装axios7.1下载axios7.2封装axios7.3解决跨域问题（配置vue.config.js，设置代理）7.4使用axios发起请求7.4.1创建api文件夹，规范使用api（推荐）7.4.2全局注册a... 查看详情
vue3+typescript封装axios并进行请求调用(代码片段)
...居为大前端的趋势所在，那就开始淦起来吧~使用TypeScript封装基础axios库代码如下：//http. 查看详情
vue3封装axios网络请求(代码片段)
...开发以及接口变更时修改请求地址，推荐将接口进行封装 查看详情
vue全家桶进阶之路47：vue3axios拦截器封装成request文件(代码片段)
...以便在整个应用程序中重复使用。以下是一个示例，展示如何将Axios拦截器封装成一个request文件：1、创建一个名为request.js的新文件，并导入Axios：importaxiosfrom\'axios\';2、创建一个名为request的函数，并将其导出：这将创建一个名... 查看详情
vue3+cli4.5.x中使用“vue-axios“(代码片段)
vue-axios文章目录vue-axios前言一、安装vue-axios二、使用方法1.第一种方法:2.第二种方法:3.第三种方法:三、与普通请求方法的区别?总结前言我是在cli4.5.x+vue3环境下做的,所以代码看起来可能有些离谱.这是一个基于vue并进行了轻度... 查看详情
在项目中用ts封装axios，一次封装团队受益(代码片段)
...然存在不可撼动的地位，接下来我们就一步一步的去封装，实现一个灵活、可复用的一个请求请发。这篇文章封装的axios已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活... 查看详情
react如何封装axios(代码片段)
Axios简介Axios是一个基于 promise 的HTTP库，可以用在浏览器和node.js中。特性支持node端和浏览器端支持拦截器等高级配置使用Promise管理异步，告别传统callback方式自动转换JSON数据客户端支持防御XSRF安装npminstallaxios--save封装... 查看详情
vue3.0+ts+element-plus实现(若依版后台管理系统)(代码片段)
...地址:Vue3.0+TS+Element-plus后台管理系统模板准备工作安装vue3.0，npmcreatevue3-project选中这几项即可，不需要vuex,我们自己封装状态管理。setup函数使用在.vue文件中,script标签下代码都必须带有lang=“ts”。关于setup函数调... 查看详情
vue3+uniapp封装请求总是出错
...法使用axios的适配器，需要基于uni.request来定义适配器。安装完成axios后在项目utils目录下建一个axios文件夹文中根目录代表utils中的axios文件夹在根目录新建一个axios.js文件，在该文件中配置一个新的axios 查看详情
react如何封装axios(代码片段)
Axios简介Axios是一个基于 promise 的HTTP库，可以用在浏览器和node.js中。特性支持node端和浏览器端支持拦截器等高级配置使用Promise管理异步，告别传统callback方式自动转换JSON数据客户端支持防御XSRF安装npminstallaxios--save封装... 查看详情