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

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

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

一、为什么要封装 Axios

1. 提高可维护性：将与 API 交互的代码封装在一个地方，便于管理和修改。如果 API 的地址、请求头或其他配置发生变化，只需要在封装的代码中进行修改，而不需要在整个项目中逐个查找和修改。
2. 代码复用：封装后的 API 请求可以在多个页面和组件中重复使用，减少了代码重复，提高了开发效率。
3. 增强可扩展性：可以方便地添加请求拦截器和响应拦截器，实现诸如添加请求头、处理错误响应、统一的错误处理等功能。

二、具体封装步骤

1. 安装依赖

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

npm install axios axios-adapter-uniapp

2. 导入依赖和配置

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

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

3. 创建 Axios 实例

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

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

4. 添加请求拦截器

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

request.interceptors.request.use(function (config) {
    // 发送请求的相关逻辑
    let token = uni.getStorageSync('My-Token');
    if (token) {
        config.headers.Authorization = 'Bearer ' + token;
    } else {
        uni.redirectTo({
            url: "/pages/login/login",
        });
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});

5. 添加响应拦截器

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

request.interceptors.response.use(res => {
    if (res.data.code === "401") {
        console.log("认证失败");
        uni.redirectTo({
            url: "/pages/login/login",
        });
    }
    return res.data;
}, error => {
    console.log("获取失败");
    console.log(error);
    return Promise.reject(new Error('faile'));
});

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

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

export default request;

三、使用封装后的request

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

import request from "./axiosService.js";

// 发送 GET 请求
request.get('/api/users').then(response => {
    console.log(response);
}).catch(error => {
    console.error(error);
});

// 发送 POST 请求
request.post('/api/users', { name: 'John', age: 30 }).then(response => {
    console.log(response);
}).catch(error => {
    console.error(error);
});

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

四、案例代码

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

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


// 封装axios构造函数请求 
// 1.先是自定义一个方法名
// 2.然后获取头部token值
// 3.延长器设不设置都可以
const request = axios.create({
  baseURL: host,
  headers: {
    // X-Litemall-Token这个名称就固定这个
	'Content-Type' : 'application/json;charset=utf-8'
  },
  adapter: axiosAdapterUniapp,
  // 超时（毫秒）
  timeout: 10000
})

// 前端请求拦截器
request.interceptors.request.use(function (config) {

  // 发送请求的相关逻辑
  // config:对象  与 axios.defaults 相当
  // 借助 config 将 localStorage 中的 token 加入请求头
  let token = uni.getStorageSync('My-Token')
  // 判断token存在就加入请求头
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }else{
	  uni.redirectTo({
	  	url:"/pages/login/login"
	  })
  }

  // 这里也可以将一些反爬的加密信息加入请求头中的自定义字段中交由后端进行验证 ---------------
  // todo
  // ---------------------------------------------------------------------------------
  
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})
// 响应拦截器
// 1.相应上面的请求拦截器的需求
// 2.把上面的请求拦截器的需求全部做到
//TODO 从这里判断，如果返回的是过期则，跳转到登录界面
request.interceptors.response.use(res => {
	if(res.data.code=="401"){
	  console.log("认证失败");
	  uni.redirectTo({
		url:"/pages/login/login"
	  })
	}
	return res.data
}, error => {
	console.log("获取失败");
	console.log(error);
	return Promise.reject(new Error('faile'))
})

// 对外暴露前面创建的构造方法
export default request

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

import request from '@/utils/request.js' 

// 查询派车单列表
export function listCar(query) {
  return request({
    url: '/car/car/list',
    method: 'get',
    params: query
  })
}

3. 页面使用代码如下

import {listCar } from './api/index.js'

listCar({name:'xxx'}).then(res=>{
	console.log(res);
	that.carList = res.rows
})