轻松掌握uniapp和TS下的网络请求及拦截器封装技巧

2023-09-28 06:33:55

uniapp加TS对网络请求及拦截器的封装

前言：
在uniapp混合开发移动端App的过程中，经常需要处理网络请求。为了减少重复性代码的编写，我们可以对原生请求方式进行封装，从而简化开发过程。本文将以TypeScript作为语言，详细介绍如何封装网络请求及拦截器。

一、准备工作

在开始封装之前，我们需要安装queryString插件，它可以帮助我们对请求参数进行序列化。

npm install qs --save

二、网络请求封装

创建一个名为request.ts的文件，并引入必要的库。

import axios from 'axios';
import qs from 'qs';

定义一个请求函数，并设置默认配置。

const request = axios.create({
  baseURL: 'https://example.com', // 设置请求的基准URL
  timeout: 10000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置默认请求头
  },
});

封装GET、POST、PUT、DELETE请求。

// GET请求
export const get = (url: string, params?: object) => {
  return request({
    url,
    method: 'GET',
    params,
  });
};

// POST请求
export const post = (url: string, data?: object) => {
  return request({
    url,
    method: 'POST',
    data: qs.stringify(data), // 将数据序列化为查询字符串
  });
};

// PUT请求
export const put = (url: string, data?: object) => {
  return request({
    url,
    method: 'PUT',
    data: qs.stringify(data),
  });
};

// DELETE请求
export const del = (url: string) => {
  return request({
    url,
    method: 'DELETE',
  });
};

三、拦截器封装

创建一个名为interceptor.ts的文件，并引入必要的库。

import axios from 'axios';

定义一个拦截器函数，并设置请求拦截器和响应拦截器。

const interceptor = axios.create();

// 请求拦截器
interceptor.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些事情
    return config;
  },
  (error) => {
    // 当请求出错时做一些事情
    return Promise.reject(error);
  }
);

// 响应拦截器
interceptor.interceptors.response.use(
  (response) => {
    // 在收到响应之后做一些事情
    return response;
  },
  (error) => {
    // 当响应出错时做一些事情
    return Promise.reject(error);
  }
);

四、使用封装后的网络请求及拦截器

在需要使用网络请求的地方，直接调用封装好的函数即可。

// 发送GET请求
get('/users').then((res) => {
  console.log(res.data);
});

// 发送POST请求
post('/users', { name: 'John Doe' }).then((res) => {
  console.log(res.data);
});

// 发送PUT请求
put('/users/1', { name: 'Jane Doe' }).then((res) => {
  console.log(res.data);
});

// 发送DELETE请求
del('/users/1').then((res) => {
  console.log(res.data);
});