原生的axios书写是这样的:
1
2
3
4
5
6
7
8
9
axios({
url: 接口地址,
method:请求方法,
data:携带数据,
}).then(res=>{
//请求接口成功的逻辑
}).
catch
(err=>{
//请求接口失败的逻辑
})
出现了这些问题:
(1)重复的地方特别多,显得代码不够优雅。
(2)后期一旦不使用axios,改用其它第三方访问后端插件,一个个文件去修改。
(3)若是axios.then()里面在嵌套多次访问后台请求,业务变得极其复杂,且代码不利于查看。
(1) vite搭建vue3项目控制台所需指令
npm init @vitejs/app //输入项目名称,选择vue cd ./项目名称 npm i //安装依赖 npm run dev //运行项目 npm install axios //安装axios依赖
(2)request.js 配置axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import axios from
'axios'
const baseURL=
'http://localhost:8888/lostFound'
//后台接口的域名或者服务器地址
//请求拦截,会自动在axios请求后端的时候添加请求头,并将token添加到请求里面
const service =axios.interceptors.request.use(config => {
if
(localStorage.getItem(
'token'
)) {
config.headers.token = localStorage.getItem(
'token'
);
}
return
config;
}, error => {
return
Promise.reject(error) })
//响应拦截,将后端传回来的token放在localStorage缓存里
service.interceptors.response.use(response => {
localStorage.setItem(
"token"
, response.headers.token);
return
response;
})
export
default
service
(3)xxx.js中封装axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import service from
'./request'
//封装axios请求
const myRequest = options => {
return
new
Promise((resolve, reject) => {
service({
url: options.url,
method: options.method ||
'GET'
,
data: options.data || {},
params: options.params || {}
}).then(res => resolve(res))
//请求成功
.
catch
(err => reject(err))
//请求失败
})
}
export
default
myRequest
(4)在App.vue使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script setup>
import HelloWorld from
'./components/HelloWorld.vue'
import { myRequest } from
'./utils/http'
import { onMounted } from
'vue'
/**
* await后面跟一个promise,await可以省略很多.then的书写,让promise更加简洁优雅,await要在async函数体内使用
*/
//get不携带参数获取数据
const getWithNoParameters = async () => {
let res = await myRequest({ url:
'/selectAllCategories'
})
console.log(
'get不携带参数'
,res)
}
//get携带参数
const getWithParameters = async ()=>{
let params={
id:10
}
let res=await myRequest({url:
'/selectFoundDetailById'
,params})
console.log(
'get携带参数'
,res)
}
//post请求方式
const post = async()=>{
let formData=
new
FormData()
formData.append(
'sno'
,
'1'
)
formData.append(
'password'
,
'1'
)
let res=await myRequest({url:
'/login'
,method:
'post'
,data:formData})
console.log(
'post:'
,res)
}
//生命周期钩子函数
onMounted(() => {
getWithNoParameters()
getWithParameters()
post()
})
</script>
<template>
<img alt=
"Vue logo"
src=
"./assets/logo.png"
/>
<HelloWorld msg=
"Hello Vue 3 + Vite"
/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color:
#2c3e50;
margin-top: 60px;
}
</style>
uni-app和小程序中
//uniapp中也可以这样封装后端请求api
export myRequest= options =>{
return new Promise((resolve,reject)=>{
uni.request({
url: options.url,
method:options.method || 'GET',
data: options.data || {},
success: res=>{
//请求后台成功
resolve(res)
},
fail: err=>{
//请求后台失败
reject(err)
}
}
})
})
}
//微信小程序中也可以这样封装后端请求api
export myRequest= options=>{
return new Promise((resolve,reject)=>{
wx.request({
url: options.url,
method:options.method || 'GET',
data: options.data || {},
success(res){
//请求后台成功
resolve(res)
},
fail(err){
//请求后台失败
reject(err)
}
}
})
})
}