采用Vue3的axios的配置教程详解

发布时间：2023-03-22 14:19:57 所属栏目：教程来源：

导读：Vue3使用axios的配置教程详解
1.安装
npm install --save axios vue-axios
2.在src根目录创建service文件夹。然后创建axios.js

2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:in

Vue3使用axios的配置教程详解
1.安装
npm install --save axios vue-axios
2.在src根目录创建service文件夹。然后创建axios.js

2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response
import axios from "axios";
const initAxios = axios.create({
timeout: 1800000//数据响应过期时间
})
//请求拦截器
initAxios.interceptors.request.use((config) => {
//在发送之前做点什么
return config
},(error) => {
//对请求错误做点什么
return error
})
//响应拦截器
initAxios.interceptors.response.use((response) => {
if (response.resultCode === 200 ) {
return response.data
} else {
return {resultCode: -1}
}
})
//导出
export default () => initAxios
3.在文件夹再创建一个service.js文件
//引入封装好的 axios
import Axios from './axios'
//实例化
const instance = Axios()
//创建需要的请求方法:get post put delete
//url:请求的接口地址
//params:请求参数
//headers:请求头
export default {
get(url,params,headers) {
return instance.get(url,{params,headers})
},post(url,headers) {
return instance.post(url,{headers})
},put(url,headers) {
return instance.put(url,delete(url,headers) {
return instance.delete(url,headers})
}
}
4.再创建一个index.js
//引入封装好的 service
import service from "@/service/service";
//声明一个基础接口变量
let baseURL;
//配置开发环境
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://www.****.com:8000/';
}
// 配置生产环境
if (process.env.NODE_ENV === 'production') {
baseURL = 'http://www.*****.com:8001/';
}
//设置请求头（如果请求头统一的话可以在axios文件设置，则无须从这里传过去）
const header = {
Accept: 'application/json;charset=UTF-8',}
//根据自身需求
let _service={
getList(data) {
const url = baseURL + 'index/getList';
return service.post(url,data,header);
}
}
//导出
export default _service
5.使用方法
import _service from "@/service";
_service.getList({你的参数}).then(res => {
console.log(res)
})
附: vue3没有this.所以使用的时候直接引用就好,如果项目比较大,接口多,可以分模块定义接口,使用的时候也是分模块导入. 以admin模块接口举例
说明:因为我的项目只有post请求,我就把请求头写在post方法里面了.后续的接口定义就省去了请求头的参数.

1.admin模块,admin.js

2.index.js 引入接口统一导出

3.vue页面引用 ,此时只有admin.js定义的接口.

4.methods方法调用接口,其中 _utils.setFormData(this.searchModel) 是我项目里自定义的一个参数格式转化,this.loadData(res) 是我项目里对响应数据统一处理的方法

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!