uniapp对axios的二次封装

曼妙佳人

uniapp官网对发起网络请求使用了uni.request，但是我比较习惯用axios，主要是香，接下来总结下我的个人经验
在项目根目录新建一个utils目录，再新建一个request.js文件，把下面的代码放进去

1. import Vue from 'vue'
   
2. import axios from 'axios'
   
3. let baseURL = 'https://test/' //测试环境的域名，上线的时候这里缓存线上的接口域名就OK
   
4. const instance = axios.create({
   
5.     baseURL,
   
6.     timeout : 6000
   
7. })
   
8. 
   
9. // 请求拦截
   
10. instance.interceptors.request.use(
    
11.     config => {
    
12.         return config
    
13.     },
    
14.     error => {
    
15.         return Promise.reject( error );
    
16.     }
    
17. );
    
18. 
    
19. // 响应拦截
    
20. instance.interceptors.response.use( res => {
    
21.     if ( res.status == 200 ){
    
22.         return res;
    
23.     } else {
    
24.         return Promise.reject( res.data.msg );
    
25.     }
    
26. });
    
27. 
    
28. // 自定义适配器 ， 适配uniapp语法
    
29. axios.defaults.adapter = function( config ) {
    
30.     return new Promise( ( resolve , reject ) => {
    
31.         let settle = require('axios/lib/core/settle');
    
32.         let buildURL = require('axios/lib/helpers/buildURL');
    
33.         uni.request({
    
34.             method : config.method.toUpperCase(),
    
35.             url : config.baseURL + buildURL( config.url , config.params , config.paramsSerializer ),
    
36.             header : config.headers,
    
37.             data : config.data,
    
38.             dataType : config.dataType,
    
39.             responseType : config.responseType,
    
40.             sslVerify : config.sslVerify,
    
41.             complete : function complete( response ) {
    
42.                 response = {
    
43.                     data : response.data,
    
44.                     status : response.statusCode,
    
45.                     errMsg : response.errMsg,
    
46.                     header : response.header,
    
47.                     config : config
    
48.                 };
    
49.             settle( resolve , reject , response );
    
50.             },
    
51.         });
    
52.     })
    
53. }
    
54. 
    
55. export default instance

复制代码

这个是针对axios的二次封装，uniapp并没有自带axios，所以使用之前需先安装下axios插件，可通过执行代码 npm install axios --save
大家都知道网络请求一般都是get或者post，所以接下来还需要封装下每一个接口的请求，看下面

我们可以在根目录创建一个api目录，然后新建api.js

把上面创建的request.js引入进来

1. import request from "@/utils/request";
   
2. 
   
3. //根据区域获取相关数据
   
4. export function testList(data) {
   
5.         return request({
   
6.                 url: "test/testList",
   
7.                 method: "post",
   
8.                 data
   
9.         });
   
10. }
    

复制代码

使用方式
在使用到的页面中直接import
import {testList} from "@/api/api";




搞定，封装结束~手码不易，欢迎大家评论区交流

tmdgdx

感谢分享

曼妙佳人

qq1056123185 发表于 2021-9-29 19:38
你之前发表的所有帖子，通过你的主题点进去，全部看不到啊。

我自己都可以看得到哦

qq1056123185

曼妙佳人 发表于 2021-9-29 17:42
看不到啥呢

你之前发表的所有帖子，通过你的主题点进去，全部看不到啊。

曼妙佳人

qq1056123185 发表于 2021-9-29 17:07
那么，为啥看不到

看不到啥呢

qq1056123185

曼妙佳人 发表于 2021-9-29 14:55

那么，为啥看不到

曼妙佳人

石榴熟了 发表于 2021-9-29 15:57
建议 可以直接 把 uni.request 封装成axios 不再依赖axios

request的二次封装思路基本差不多，找空再封装个出来

石榴熟了

建议 可以直接 把 uni.request 封装成axios 不再依赖axios   

曼妙佳人

qq1056123185 发表于 2021-9-29 14:42
为啥看不到你发表的历史帖子？

               

qq1056123185

为啥看不到你发表的历史帖子？