uniapp封装发送请求方式是什么-uni-app-PHP中文网

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

PHPz

发布： 2023-04-27 09:05:11

原创

1162人浏览过

随着前端开发的不断发展，前端框架也越来越丰富多样。而其中，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封装发送请求方式是什么的详细内容，更多请关注php中文网其它相关文章！