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封裝發送請求方式是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！