Vue3使用axios

如何在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)
})
}