代码模版-vue使用axios调用请求
文章目录
- 简介
- 步骤一:安装 axios 依赖
- 步骤二:自己配置请求 request
- 步骤三:在 main.js 中指定 request
- 步骤四:其他组件的 js 的请求
简介
vue 常常使用 axios 包来调用请求
步骤一:安装 axios 依赖
cnpm install --save axios
步骤二:自己配置请求 request
在 src/ 新建 utils,其中新建 requests.js
import axios from "axios"
import {ElLoading, ElMessage} from "element-plus";
const contentTypeForm = "application/x-www-form-urlencoded;charset=utf-8"
const contentTypeJson = "application/json"
const contentTypeFile = "multipart/form-data"
// 配置请求,这个 config 有请求的相关信息
const request = (config) => {
// 初始化 contentType 和 params
let contentType
let params
if (config.dataType === "json") {
contentType = contentTypeJson
} else if (config.dataType === "form") {
contentType = contentTypeForm
} else if (config.dataType === "file") {
contentType = contentTypeFile
let param = new FormData()
for (let key in config.params) {
param.append(key, config.params[key])
}
params = param
} else {
contentType = contentTypeJson
}
// 配之1: 配置请求实例
const instance = axios.create({
baseURL: "api",
timeout: 10 * 1000,
headers: {
"Content-Type": contentType,
"X-Requested-With": "XMLHttpRequest",
}
})
// 配置2: request 发送前拦截器
let loading = null
instance.interceptors.request.use(
(config) => {
// 如果 showLoading 为 true 就用 element plus 中的家在样式,但是一直存在直到后面 resp 再关闭
if (config.headers.showLoading) {
// 加载中样式,拷贝自 element plus 官网
loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)',
})
}
return config
},
(error) => {
if (loading) {
// 如果 loading 存在就把加载样式关了
loading.close()
}
// 然后再输出 error 提醒样式,拷贝自 element plus 官网
ElMessage({
showClose: true,
message: '发送请求失败',
type: 'error',
})
return Promise.reject("发送请求失败")
},
)
// 配置3: response 响应前拦截器
instance.interceptors.response.use(
(response) => {
// 响应前 close 加载样式
if (loading) {
loading.close()
}
const responseData = response.data
// 做一些响应码的判断,一般响应结构
/*
code: 0,
msg: "success",
data: {},
*/
/*
if (responseData.code === xxx) {
// todo: 该响应码后的操作
return Promise.reject(responseData.message)
} else if (responseData.code === yyy) {
// todo: 该响应码后的操作
return Promise.reject(responseData.message)
}
*/
// 正常情况下返回响应数据
return responseData
},
(error) => { // 服务 504 或者 404 了,网络有问题或者服务关闭了
if (loading) {
loading.close()
}
return Promise.reject("响应异常")
},
)
// 配置4: 配置发送 post 请求
return instance.post(config.url, params).catch((error) => {
// 这里用了 element plus 样式,展现响应后样式
ElMessage({
showClose: true,
message: error,
type: 'error',
})
return null
})
}
export default request
步骤三:在 main.js 中指定 request
src/main.js 中添加
import { createApp } from 'vue'
import App from './App.vue'
import request from "./utils/request";
const app = createApp(App)
// app.use(...)
// 这里配置上使用 axios 自己配置 export 出来的 request
app.config.globalProperties.Request = request
// app 绑定
步骤四:其他组件的 js 的请求
在其他应用组件中请求,就会用到这个 request
import getCurrentInstance from "vue"
const proxy = getCurrentInstance()
// @click 事件触发
const foo = () => {
// function1 执行,异步一个函数
async () => {
// todo sth.
// wait 得在 async 中,这里进行请求,可以注意前面配置的 axios req 会生效
let result = await proxy.Request({
url: "",
params: {
account: "",
password: "",
checkCode: "",
},
})
}
// function2 执行
}