uniapp 中集成 axios 封装request,实现若依权限认证和若依 api方法共用 ...

uniapp 中集成 Axios ,封装request,实现若依权限认证和若以哀求方法的直接复用,直接复制若以js中的哀求方法到uniapp使用即可

在 Uniapp 开发中，与后端 API 进行交互是至关紧张的环节。为了实现更高效、可维护的 API 调用，我们可以集成 Axios 并进行封装，使其可以大概与若依框架的 API 进行良好的交互和共用 JS 方法。
一、为什么要封装 Axios

• 进步可维护性：将与 API 交互的代码封装在一个地方，便于管理和修改。如果 API 的地址、哀求头或其他配置发生变革，只须要在封装的代码中进行修改，而不须要在整个项目中逐个查找和修改。
  
• 代码复用：封装后的 API 哀求可以在多个页面和组件中重复使用，淘汰了代码重复，进步了开发服从。
  
• 增强可扩展性：可以方便地添加哀求拦截器和相应拦截器，实现诸如添加哀求头、处理错误相应、同一的错误处理等功能。
  

二、具体封装步骤

1. 安装依靠

起首，确保在 Uniapp 项目中安装了axios和axios-adapter-uniapp。可以通过以下命令进行安装：

1. npm install axios axios-adapter-uniapp

复制代码

2. 导入依靠和配置

在项目中创建一个用于封装 Axios 的文件，好比axiosService.js。在这个文件中，导入axios和axios-adapter-uniapp，并导入项目中的配置文件（如果有）以获取 API 的主机地址等信息。

1. import axios from "axios";
2. import axiosAdapterUniapp from 'axios-adapter-uniapp';
3. import store from "../store";
4. import { host } from "./config";

复制代码

3. 创建 Axios 实例

使用axios.create()方法创建一个 Axios 实例，并设置一些基本的配置，如baseURL、哀求头、超时时间等。

1. const request = axios.create({
2.     baseURL: host,
3.     headers: {
4.         'Content-Type': 'application/json;charset=utf-8',
5.     },
6.     adapter: axiosAdapterUniapp,
7.     timeout: 10000,
8. });

复制代码

4. 添加哀求拦截器

哀求拦截器可以在发送哀求之进步行一些操作，好比添加哀求头中的认证信息。在这个例子中，我们从本地存储中获取token，如果存在token，则将其添加到哀求头中。如果没有token，则重定向到登录页面。

1. request.interceptors.request.use(function (config) {
2.     // 发送请求的相关逻辑
3.     let token = uni.getStorageSync('My-Token');
4.     if (token) {
5.         config.headers.Authorization = 'Bearer ' + token;
6.     } else {
7.         uni.redirectTo({
8.             url: "/pages/login/login",
9.         });
10.     }
11.     return config;
12. }, function (error) {
13.     return Promise.reject(error);
14. });

复制代码

5. 添加相应拦截器

相应拦截器可以在接收到相应之后进行一些操作，好比处理错误相应。在这个例子中，如果相应的状态码是 401（认证失败），则重定向到登录页面。如果相应出现错误，则打印错误信息并返回一个 Promise 错误对象。

1. request.interceptors.response.use(res => {
2.     if (res.data.code === "401") {
3.         console.log("认证失败");
4.         uni.redirectTo({
5.             url: "/pages/login/login",
6.         });
7.     }
8.     return res.data;
9. }, error => {
10.     console.log("获取失败");
11.     console.log(error);
12.     return Promise.reject(new Error('faile'));
13. });

复制代码

6. 对外暴露封装后的哀求方法

末了，将封装好的 Axios 实例对外暴露，以便在项目中的其他地方使用。

1. export default request;

复制代码

三、使用封装后的request

在 Uniapp 的页面或组件中，可以通过导入封装好的request来进行 API 哀求。例如：

1. import request from "./axiosService.js";
3. // 发送 GET 请求
4. request.get('/api/users').then(response => {
5.     console.log(response);
6. }).catch(error => {
7.     console.error(error);
8. });
10. // 发送 POST 请求
11. request.post('/api/users', { name: 'John', age: 30 }).then(response => {
12.     console.log(response);
13. }).catch(error => {
14.     console.error(error);
15. });

复制代码

通过以上封装，我们可以在 Uniapp 项目中方便地与若依框架的 API 进行交互，实现高效的前后端分离开发。同时，封装后的代码也更加易于维护和扩展，为项目标长期发展提供了保障。
四、案例代码

1. 封装好的request.js文件全部代码如下

1. import axios from "axios";
2. import axiosAdapterUniapp from 'axios-adapter-uniapp'
3. import store from "../store";
4. import { host } from "./config";
7. // 封装axios构造函数请求
8. // 1.先是自定义一个方法名
9. // 2.然后获取头部token值
10. // 3.延长器设不设置都可以
11. const request = axios.create({
12.   baseURL: host,
13.   headers: {
14.     // X-Litemall-Token这个名称就固定这个
15.         'Content-Type' : 'application/json;charset=utf-8'
16.   },
17.   adapter: axiosAdapterUniapp,
18.   // 超时（毫秒）
19.   timeout: 10000
20. })
22. // 前端请求拦截器
23. request.interceptors.request.use(function (config) {
25.   // 发送请求的相关逻辑
26.   // config:对象  与 axios.defaults 相当
27.   // 借助 config 将 localStorage 中的 token 加入请求头
28.   let token = uni.getStorageSync('My-Token')
29.   // 判断token存在就加入请求头
30.   if (token) {
31.     config.headers.Authorization = 'Bearer ' + token
32.   }else{
33.           uni.redirectTo({
34.                   url:"/pages/login/login"
35.           })
36.   }
38.   // 这里也可以将一些反爬的加密信息加入请求头中的自定义字段中交由后端进行验证 ---------------
39.   // todo
40.   // ---------------------------------------------------------------------------------
41.   
42.   return config
43. }, function (error) {
44.   // Do something with request error
45.   return Promise.reject(error)
46. })
47. // 响应拦截器
48. // 1.相应上面的请求拦截器的需求
49. // 2.把上面的请求拦截器的需求全部做到
50. //TODO 从这里判断，如果返回的是过期则，跳转到登录界面
51. request.interceptors.response.use(res => {
52.         if(res.data.code=="401"){
53.           console.log("认证失败");
54.           uni.redirectTo({
55.                 url:"/pages/login/login"
56.           })
57.         }
58.         return res.data
59. }, error => {
60.         console.log("获取失败");
61.         console.log(error);
62.         return Promise.reject(new Error('faile'))
63. })
65. // 对外暴露前面创建的构造方法
66. export default request

复制代码

2. uniapp中js方法如下(直接复制若依api文件夹下js文件中的方法即可)

1. import request from '@/utils/request.js'
3. // 查询派车单列表
4. export function listCar(query) {
5.   return request({
6.     url: '/car/car/list',
7.     method: 'get',
8.     params: query
9.   })
10. }

复制代码

3. 页面使用代码如下

1. import {listCar } from './api/index.js'
3. listCar({name:'xxx'}).then(res=>{
4.         console.log(res);
5.         that.carList = res.rows
6. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。