Promise实现uniapp请求的封装

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」。

前言

通过本案例我们可以学习到：

• Promise的使用和相关概念。
• export的模块化导出使用场景。

一、uniapp初始请求使用方式如下：

下面是uni官方的接口请求方式，主要分为url/data/header/success还有fail。

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
     },
    fail:(err) => {
	 console.log(err);
  }
});

二、我们先通过Promise进行一次简单封装,新建request.js文件：

Promise

在开始这一步前，我们先看看什么是Promise和使用方式。
mdn解释：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
是的http请求正是异步操作！详细链接Promise()构造器的使用 那看看用法吧：
new Promise(executor)
executor为双参函数，resolve('someValue'), reject('failure reason')
那我们success就调用resolve('someValue')，fail就调用reject('failure reason')。
好了，话不多说开始吧。

//options参数我们后面会说
function service(options = {}) {
return new Promise((resolved, rejected) => {
uni.request({
   url: options.url, //仅为示例，并非真实接口地址。
   data: options.data,
   header: {
       'content-type': 'application/x-www-form-urlencoded',
       'accessToken': `${token}` //权限token 
   },
   success: (res) => {
      resolved(res.data); //成功了
   },
   fail:(err) => {
   rejected(err) //失败了
 }
});
}
}
export default service;

三、最后我们在上一步基础上再一次优化。

这一步我们把配置项单独抽出来处理！ 并且通过process.env.NODE_ENV对开发环境进行判断。不了解点击链接 然后添加公共的请求头options.header，比如在vuex中获取token信息等。
最后通过业务需求对httpcode做相应的处理。 看代码：

//把配置项单独处理

import store from '/store/index.js'; //vuex  
let server_url=' ';//请求地址
let token = ' ';  凭证
process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置
function service(options = {}) {
       store.state.token && (token = store.state.token); //从vuex中获取登录凭证
       options.url = `${server_url}${options.url}`;
          //配置请求头
        options.header = {
		'content-type': 'application/x-www-form-urlencoded',
		'accessToken': `${token}` //Bearer 
	};

	return new Promise((resolved, rejected) => {
                //成功
		options.success = (res) => {
              
			if (Number(res.data.code) == 0) {  //请求成功
				resolved(res.data.data);
			} else {
				uni.showToast({
					icon: 'none',	
					duration: 3000,
					title: `${res.data.msg}`
				});
				rejected(res.data.msg);//错误
			}

		}
              //错误
		options.fail = (err) => {
			rejected(err); //错误
		}
		uni.request(options);

	});
}
export default service;

四、现在我们在页面中使用。

到这其实大致的封装已经完成了，现在我们看看项目结构。

###1、新建pages页面。
目录如下 ┌─common │ ├─request.js //请求 ┌─pages
│ ├─index │ │ └─api.js //api列表 │ │ └─index.vue //页面文件 ├─static
├─store
│ ├─index.js //vuex ├─main.js
├─App.vue
├─manifest.json
└─pages.json

2、配置api列表。api.js //api列表

到这我们得先了解了解export模块化export。

import request from '/common/request.js'
export function login(data) {
  return request({
    url: '/user/login',
    method: 'POST',
    data
  })
}

3、页面中使用

最后在页面中引入，通过then调用，大功告成。

import { login} from './api.js';  //引入需要的api
//发起请求
onLoad() {
login('parameter').then(data => {
   console.log(data);
});
}...

结尾

详细代码：uniapp插件市场下载ext.dcloud.net.cn/plugin?id=2…