uniapp封装发送请求方式是什么

百变鹏仔 4周前 (11-20) #uniapp

文章标签方式

随着前端开发的不断发展，前端框架也越来越丰富多样。而其中，uni-app框架的崛起引起了前端开发者的广泛关注。因为它具有了很多原生开发中才有的功能，如无需反复打包、多端发布等。

在uni-app开发过程中，我们常常需要进行网络请求。而为了方便代码复用和编写，我们通常会封装一下请求方式。接下来，我将分享一下如何用uni-app框架封装发送请求方式的方法。

一、封装axios

axios是现代的、基于 Promise 的 HTTP 库，它是uni-app框架中封装网络请求和响应的基础库。我们可以通过axios拦截器来统一添加请求头、请求参数和响应拦截等操作，以下是封装axios的代码示例：

import axios from 'axios';const instance = axios.create({    baseURL: 'https://api.xxx.com', // 请求基础路径    timeout: 10000 // 超时时长});// 添加请求拦截器instance.interceptors.request.use(    config => {        // 添加请求头        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');        return config;    },    error => {        return Promise.reject(error);    });// 添加响应拦截器instance.interceptors.response.use(    response => {        return response.data;    },    error => {        return Promise.reject(error);    });export default instance;

二、封装请求方法

在封装请求方法时，我们应该考虑到各种情况下的请求方式和参数格式。以下是封装请求方法的示例代码：

import axios from './axios';export const get = (url, data) => {  return new Promise((resolve, reject) => {    axios      .get(url, { params: data })      .then(response => {        resolve(response);      })      .catch(error => {        reject(error);      });  });};export const post = (url, data) => {  return new Promise((resolve, reject) => {    axios      .post(url, data)      .then(response => {        resolve(response);      })      .catch(error => {        reject(error);      });  });};

三、调用封装方法

当我们完成上述封装后，我们可以在需要使用的地方直接调用封装好的方法了。以下是调用方法的示例代码：

import { get, post } from './request'; // 导入封装的请求方法get('/api/news', { page: 1, pageSize: 10 }).then(data => {  console.log(data);});post('/api/login', { username: 'xxx', password: 'xxx' }).then(data => {  console.log(data);});

综上，在uni-app开发过程中，封装发送请求方式是一项非常基础但十分实用的技能。通过上述示例代码，你可以掌握如何封装axios、请求方法和调用方法，从而更加高效地进行uni-app开发。

文章推荐

uniapp封装发送请求方式是什么

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项