EDA365电子论坛网
标题:
API接口的封装流程简要
[打印本页]
作者:
QqWw11
时间:
2020-10-20 13:43
标题:
API接口的封装流程简要
第一步：
* A5 X2 S: d5 m
* G% u' s$ D+ `, V
首先引入axios
/ I6 ]& n& D7 x0 @5 ?, q; l
0 P4 _* B& W3 }1 W* _
然后创建两个文件夹api和http
9 G0 H* w. f+ F c; f0 C
- s4 Y, J% {1 j8 @% D
http.js 里面的
0 j" Z+ [. B; j: C
7 @1 i# G( G; Q6 S
复制代码
3 k0 W. T8 L! M( M3 v: c
1 import axios from ‘axios’;//引入axios
/ }# e/ `/ g& v9 ~1 D
2
& \% N8 }4 @/ o2 }: I' H3 r5 {
3 //环境的切换 开发环境(development)使用的是测试接口 和 生产环境(production)使用的是上线接口
5 t- E" D) G" _" p7 K3 a
4 if(process.env.NODE_ENV==‘development’){
2 m ^. x7 @8 k% X l
5 //设置默认路径
& X% g( b0 b# S& b# Y
6 axios.defaults.baseURL=‘http://120.53.31.103:84/’
. f% I5 q. I) R% r
7 }
9 P% W5 b# P! M; |, j, p: C
8 if(process.env.NODE_ENV==‘production’){
% Z1 p4 {, n/ ^! j
9 axios.defaults.baseURL=‘https://wap.365msmk.com/’
6 S8 t$ T! W8 V0 f
10 }
. V v$ t& C" K+ j) h8 v' [. o
11 axios.defaults.timeout=5000;//加载不出来5秒之后就是加载失败
7 `- C: G8 K) l1 B
12 axios.interceptors.request.use(
' K* S1 m3 [% F9 D! p5 j" I
13 config=>{
: f8 p: G2 r! K8 H: F# s" O
14 config.headers={DeviceType:‘H5’}//可每次发送请求之前的逻辑处理 比如判断token
: Z9 R$ o! j9 @, f% W. h
15 return config;
2 v' `' j# o1 _1 @* }' F2 v' m
16 }
; F( A/ [8 \+ r7 g8 r
17 )
| _+ n& ~* B# X
18 // axios.interceptors.response.use(
4 t/ S T* Z0 {+ u" Z% m# _
19 // response=>{
) L1 [" F1 N/ n2 o
20 // return response;
( `. S5 o* r# C1 t& ~3 ^# G
21 // },
( O! \/ {. Y" n7 U1 h# G3 I: B% ~
22 // error=>{
. p6 ^, I/ M: r% g; Q- ~
23 // if(error.response.status){
0 D! z: x q4 ^+ F) j) l# p
24
+ i. p8 M7 }5 a3 _% R8 D
25 // }
) H* T8 j1 L& Q) I3 l, Q7 s( }
26 // }
7 n$ l. H( G+ Z' c
27 // )
: u/ s, O$ k {( \3 @; x1 C" y2 ^+ |
28
9 g# U/ T% n6 S" o
29 // 使用promise返回axios请求的结果
+ w2 p# y# S% L) z, ^
30 export function get(url, params) {
* D+ I4 z* g7 v$ r* b6 D: @3 S( n* s
31 return new Promise((resolve, reject) => {
' s* F* [3 o( A# B
32 axios.get(url, {
' q \: K3 V n4 h, v) t; N
33 params:params
6 i. u1 V4 H% n: {* E% o. n# x
34 }).then(res => {
) j3 I. \. D+ z( x! _+ L( j0 w6 P
35 resolve(res)
S z! d3 w. _, t3 N
36 }).catch(err => {
3 m# M5 C: w$ p; O+ t6 J- f
37 reject(err)
/ B5 o; F0 h9 T* L2 L
38 })
Z9 {' Z b; e& r' v5 L, y
39 })
, Z$ G- o7 N4 I& }8 X
40 };
' i% e, S. u+ @+ B, E" o2 R5 F
41
- V1 t* d+ s! C+ }
42 export function post(url,params){
% ~# a; ?; H+ ` I- R8 R
43 return new Promise((resolve,reject)=>{
9 m! b( D) A+ i
44 axios.post(url,params).then(res=>{
: T: R7 o: z* o- A! i0 k
45 resolve(res.data)
D1 `& N$ I% I6 E" k
46 }).catch(err=>{
7 A4 f/ S8 S4 P( l% o$ i+ v
47 reject(err.data)
5 A/ u2 y O) R" V1 g: E, ~2 B
48 })
4 ?" a ]7 d, ^( o
49
6 x( e d* n, w7 N( @5 V/ H
50 })
3 f" C( J' i9 r5 A8 [+ }
51 }
, J( z+ j; W' H, F
复制代码
* O, u& s( b8 x# Y3 ^4 ]) N8 Y* D
api.js里面的
% g+ q3 ~& ^( i, {. ^" e
! T' f1 u+ N. m0 w! j
复制代码
8 _& _ S, v* C4 w+ v1 O9 D6 T
import { get, post } from “…/http/http” //引入封装好的get和post方法
8 \, d! [6 M" Z# ?6 r
// 封装请求的方式
2 f/ n1 f2 b8 K, p1 Y
export function getBanners() {//轮播
4 B7 c5 T( M8 [( j6 D0 I
return get(‘api/app/banner’)
1 d( n3 R, G* j Q- ]) \7 M0 {
}
3 {1 z1 U& s) K
( B" W# T2 ?1 _/ Y% k& ]9 v; L
export function getIndex(){//首页数据
: ?% `; P8 F- r* y5 _
return get(‘api/app/recommend/appIndex’)
3 j. G; Y# P8 @1 m/ W2 J+ r
}
/ I7 k6 P9 i) V7 P/ H
复制代码
, C* z; s& z) J6 i
然后在vue里面的文件应用
! `( U5 ~6 m: H0 i
5 ?. m! L2 f8 Y, U6 _
复制代码
2 }! a. |* N/ u- ^
import { getBanners, getIndex } from “…/api/api”;//引入api里面定义的方法
' [4 g' {9 D+ V2 t, i& R8 n- Q
% a$ n5 k0 _- q6 F
async mounted() {
# A- F* s) h. f* m
var swiperr = await getBanners();
$ R' G C$ M/ I# Z" P8 }
console.log(swiperr.data.data);
^/ J7 Z+ U! z) }& d
this.swipers = swiperr.data.data; //轮播图渲染
8 u, X0 o+ {9 p; G Z- Z
0 t$ L Z- R* ^. B+ C' [0 |
var strr = await getIndex();
" @6 w8 w, h' w- ^7 z+ f
console.log(strr); //明星讲师渲染
/ o1 X O. V# [$ U! ^5 g
this.strs = strr.data.data;
% L* k3 d& N2 E: _
console.log(this.strs);
' {: P+ }$ m8 i. c! e$ V9 E( q
1
7 R; g. [1 o/ n4 C- i1 `
2
3 ^ H- {7 c6 J& q9 X$ ]
3
6 W F: N& _; `1 y2 D D) E
4
- A( ^2 x+ s" Z- P# Q% \9 b, c' ]
}
5 W' O! R- E" V( V
9 |. @3 Q1 b2 { ?
作者:
谢谢侬
时间:
2020-10-20 13:57
端口配置呢 有没有可供参考的
欢迎光临 EDA365电子论坛网 (https://bbs.eda365.com/)
Powered by Discuz! X3.2