• 欢迎光临~

Vue3使用axios

开发技术 开发技术 2022-10-10 次浏览

如何在Vue项目中使用axios请求

http://www.45fan.com/article.php?aid=1D82KNnQB62JUc6O

Vue3-使用axios发起网络请求

https://blog.csdn.net/liuyuxin36/article/details/123618227

vue项目中怎么封装api请求

https://blog.csdn.net/weixin_49577940/article/details/119037155

 

vue项目中怎么封装api请求

Django + Vue前后端分离项目部署

https://blog.csdn.net/weixin_42134789/article/details/120984569

http://t.zoukankan.com/FanMLei-p-10500975.html

Django+vue前后端分离项目构建

 
 

https://blog.csdn.net/oliver3455/article/details/125051236

 

uni-app调取接口的3种方式以及封装uni.request()详解

http://www.45fan.com/article.php?aid=1D82KNnQB62JUc6O

一般情况填下,我们需要封装5个方法,get(),post(json),post(formdata),image-upload(),file-upload(),
但图片上传和文件上传可以只在特定组件内使用,所以我们需要封装3个方法

 

import axios from 'axios' // api: https://github.com/axios/axios
import store from "@/store" // vuex
import {AxiosResponse, AxiosRequestConfig, AxiosError} from "axios"; // 万恶的ts
import router from '@/router' //router路由
// 全局的遮罩层控制
import {ElLoading, ElNotification, ElMessage} from 'element-plus'

// 允许跨域
axios.defaults.withCredentials = true
// 超时设置,不建议在这里设置超时
// axios.default.timeout = 10000
// 如果是生产模式 ,就是“/”,如果不是,就是'http://127.0.0.1:8000/',根据实际情况来
const baseUrl = process.env.NODE_ENV === 'production' ? `/` : 'http://127.0.0.1:8000/',
// 请求拦截器
axios.interceptors.request.use((config: AxiosRequestConfig) => {
// 添加令牌,
// 启动遮罩层
}, (error: AxiosError) => {
// 出现错误,取消遮罩层
}

// 响应拦截器,判断返回码,如果是200或者201,就将结果返回组件,如果不是200或者201,就提示错误
axios.interceptors.response.use(
axios.interceptors.response.use(
// 请求结束,关闭遮罩层
return response
},
(error: AxiosError) => {
// 请求出现错误,请求结束,关闭遮罩层
// 错误处理
return error
}
);
// 封装get方法
export function $get(api: any, params: any) {
return axios({
method: "get",
url: baseUrl + api,
params: params,
}).then(response => response.data)
}
// 封装post JSON请求
export function $json(api: any, data: any) {
return axios({
method: 'post',
url: baseUrl + api,
headers: {'Content-Type': 'application/json'},
data: data,
}).then(response => response.data).catch((err) => {
console.log(err)
})
}
// 封装post formdata请求
export function $form(api: any, data: any) {
return axios({
method: 'post',
url: baseUrl + api,
// baseURL: root,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data,
transformRequest: [function (data) {
let ret = ''
for (const it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
}).then(response => response.data).catch((err) => {
console.log(err)
})
}

程序员灯塔
转载请注明原文链接:Vue3使用axios
喜欢 (0)