PHP前端开发

uniapp如何实现网络请求封装

百变鹏仔 2个月前 (11-20) #uniapp
文章标签 如何实现
uniapp实现网络请求封装的方法:首先实现初始请求;然后新建【request.js】文件,代码为【return new promise((resolved, rejected) => {uni.request..】;最后进行优化即可。

本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。

推荐(免费):uni-app开发教程

uniapp实现网络请求封装的方法:

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

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文件:

//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) => {      rejected(res.data);   }.fail = (err) => {   rejected(err) }});}}export default service;

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

//把配置项单独处理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列表

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

3、页面中使用

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