随着前端开发的不断发展，前端框架也越来越丰富多样。而其中，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开发。
