uni-app之网络请求

uni-app之网络请求

一,介绍

uni.request(OBJECT),发起网络请求,以下主要是一些特殊的参数说明,详细的可查看uni-app官网。

1,method的有效值必须是大写,默认GET方式;

2,success 返回参数说明

参数	类型	说明
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header

3,传参数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• • 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
  • 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
  • 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

二,网络请求封装

 第一步:参数统一初始化配置

 import { configBaseUrl, GET } from "./const"

   config: {
     baseUrl: configBaseUrl,
     header: {
       'Content-Type': 'application/json;charset=UTF-8',
     },
     data: {},
     method: GET,
     dataType: "json",  /* 如设为json，会对返回的数据做一次 JSON.parse */
     responseType: "text",
     success() { },
     fail() { },
     complete() { }
   },

 第二步:拦截器定义

   interceptor: {
     request: null,
     response: null
   },

 第三步:处理传入的参数

     options.baseUrl = options.baseUrl || this.config.baseUrl
     options.dataType = options.dataType || this.config.dataType
     options.url = options.baseUrl + options.url
     options.data = options.data || {}
     options.method = options.method.toUpperCase() || this.config.method

     // 请求头部类型提供自定义
     const contentType = options.contentType;
     delete options.contentType;//      // 'Content-Type': 'application/x-www-form-urlencoded'
     const headers = contentType ? { 'Content-Type': contentType } : this.config.baseUrl; //默认 application/json;charset=UTF-8 json数据传参
     options.header = Object.assign({}, options.header, headers);

 第四步:发送网络请求

使用Promise方法,方便调用获取返回的参数;并做统一的处理以及日志记录。

 return new Promise((resolve, reject) => {
       let _config: any = null

       options.complete = (response: any) => {
         let statusCode = response.statusCode
         response.config = _config
         if (process.env.NODE_ENV === 'development') {
           if (statusCode === 200) {
             console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
           }
         }
         if (this.interceptor.response) {
           // @ts-ignore
           let newResponse = this.interceptor.response(response)
           if (newResponse) {
             response = newResponse
           }
         }
         // 统一的响应日志记录
         _reslog(response)
         if (statusCode === 200) { //成功
           const result = _getResult(response.data);//网络请求成功后数据处理
           resolve(result);
         } else {
           reject(response)
         }
       }

       _config = Object.assign({}, this.config, options)
       _config.requestId = new Date().getTime()

       if (this.interceptor.request) {
         // @ts-ignore
         this.interceptor.request(_config)
       }

       // 统一的请求日志记录
       _reqlog(_config)
       uni.request(_config);
     });

 第五步:再次封装,习惯使用

 /**
  * 服务统一处理 添加拦截器 并抛出使用
  */
 function requestApi(url: String, options: any) {
   if (!options) {
     options = {}
   }
   /**
   * @description: 响应拦截器
   * @param {object} 当前请求成功回调数据
   * @return 不return对象，则不返回数据
   */
   // @ts-ignore
   httpService.interceptor.response = (response: any) => {
     console.log('个性化response....', JSON.stringify(response))
     //判断返回状态 执行相应操作
     return response;
   }
   /**
   * @description: 请求拦截器
   * @param {object} 当前请求配置参数
   * @return 不return对象，则不发送当前请求
   */
   // @ts-ignore
   httpService.interceptor.request = (config: any) => {
     console.log('config....', JSON.stringify(config))
     //获取配置信息 统一添加配置与判断
     return config;
   }
   options.url = url
   return httpService.request(options);
 }

 第六步:完整代码

 import { configBaseUrl, GET } from "./const";

 const httpService = {
   config: {
     baseUrl: configBaseUrl,
     header: {
       'Content-Type': 'application/json;charset=UTF-8',
     },
     data: {},
     method: GET,
     dataType: "json",  /* 如设为json，会对返回的数据做一次 JSON.parse */
     responseType: "text",
     success() { },
     fail() { },
     complete() { }
   },
   interceptor: {
     request: null,
     response: null
   },
   request(options: any) {
     if (!options) {
       options = {}
     }
     options.baseUrl = options.baseUrl || this.config.baseUrl
     options.dataType = options.dataType || this.config.dataType
     options.url = options.baseUrl + options.url
     options.data = options.data || {}
     options.method = options.method.toUpperCase() || this.config.method

     // 请求头部类型提供自定义
     const contentType = options.contentType;
     delete options.contentType;//      // 'Content-Type': 'application/x-www-form-urlencoded'
     const headers = contentType ? { 'Content-Type': contentType } : this.config.baseUrl; //默认 application/json;charset=UTF-8 json数据传参
     options.header = Object.assign({}, options.header, headers);
     // 加密数据

     // 数据签名
         /*
         _token = {'token': getStorage(STOREKEY_LOGIN).token || 'undefined'},
         _sign = {'sign': sign(JSON.stringify(options.data))}
         options.header = Object.assign({}, options.header, _token,_sign)
         */

     return new Promise((resolve, reject) => {
       let _config: any = null

       options.complete = (response: any) => {
         let statusCode = response.statusCode
         response.config = _config
         if (process.env.NODE_ENV === 'development') {
           if (statusCode === 200) {
             console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
           }
         }
         if (this.interceptor.response) {
           // @ts-ignore
           let newResponse = this.interceptor.response(response)
           if (newResponse) {
             response = newResponse
           }
         }
         // 统一的响应日志记录
         _reslog(response)
         if (statusCode === 200) { //成功
           const result = _getResult(response.data);//网络请求成功后数据处理
           resolve(result);
         } else {
           reject(response)
         }
       }

       _config = Object.assign({}, this.config, options)
       _config.requestId = new Date().getTime()

       if (this.interceptor.request) {
         // @ts-ignore
         this.interceptor.request(_config)
       }

       // 统一的请求日志记录
       _reqlog(_config)
       uni.request(_config);
     });
   },
 }

 /**
  * 服务统一处理 添加拦截器 并抛出使用
  */
 function requestApi(url: String, options: any) {
   if (!options) {
     options = {}
   }
   /**
   * @description: 响应拦截器
   * @param {object} 当前请求成功回调数据
   * @return 不return对象，则不返回数据
   */
   // @ts-ignore
   httpService.interceptor.response = (response: any) => {
     console.log('个性化response....', JSON.stringify(response))
     //判断返回状态 执行相应操作
     return response;
   }
   /**
   * @description: 请求拦截器
   * @param {object} 当前请求配置参数
   * @return 不return对象，则不发送当前请求
   */
   // @ts-ignore
   httpService.interceptor.request = (config: any) => {
     console.log('config....', JSON.stringify(config))
     //获取配置信息 统一添加配置
     return config;
   }
   options.url = url
   return httpService.request(options);
 }

 /**
  * 请求接口日志记录
  */
 function _reqlog(req: any) {
   if (process.env.NODE_ENV === 'development') {
     console.log("【" + req.requestId + "】 地址：" + req.url)
     if (req.data) {
       console.log("【" + req.requestId + "】 请求参数：" + JSON.stringify(req.data))
     }
   }
   // 调接口异步写入日志数据库
 }

 /**
  * 响应接口日志记录
  */
 function _reslog(res: any) {
   let _statusCode = res.statusCode;
   if (process.env.NODE_ENV === 'development') {
     console.log("【" + res.config.requestId + "】 地址：" + res.config.url)
     if (res.config.data) {
       console.log("【" + res.config.requestId + "】 请求参数：" + JSON.stringify(res.config.data))
     }
     console.log("【" + res.config.requestId + "】 响应结果：" + JSON.stringify(res))
   }

   // 除了接口服务错误外，其他日志调接口异步写入日志数据库
   switch (_statusCode) {
     case 200:
       break;
     case 401:
       break;
     case 404:
       ToastWarn('找不了资源文件！')
       break;
     default:
       ToastWarn('服务器异常！')
       break;
   }
 }

 /**
  * 结果统一处理
  */
 function _getResult(res: any) {
   if (res.httpCode === 200) {
     return { result: res.data };
   }
 }

 export default requestApi;

三,使用封装方法（vue项目皆可按如下封装调用）

3.1,store中调用

第一步:引入接口

 import { login } from '../../services/api/user'

第二步:在store中使用

  login({ commit }, userInfo) {//store actions中的方法
     const { username, password } = userInfo
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password }).then(response => {//登录接口
         const { result } = response
         console.log('result===', result)
         resolve(result)
       }).catch(error => {
         reject(error)
       })
     })
   }

第三步:在页面中调用actions方法

  this.$store.dispatch('user/login', { username: this.username, password: this.password })
                 .then(() => {
                     ToastSuccess('登陆成功');
                     uni.switchTab({
                         url: '../index/index',
                     })
                 }).catch(() => {
                     ToastWarn('登陆失败');
                 });

3.2,封装统一的api入口

第一步:封装接口服务统一入口

在services中添加文件index.ts,添加如下代码

 // https://webpack.js.org/guides/dependency-management/#requirecontext
 const apisFiles = require.context('./api', false, /\.ts$/);

 // you do not need `import user from './api/user'`
 // it will auto require all api from api file
 const apis = apisFiles.keys().reduce((apis, apiPath) => {
     // set './user.ts' => 'user'
     // const moduleName = apiPath.replace(/^\.\/(.*)\.\w+$/, '$1');//文件名
     const value = apisFiles(apiPath);
     apis = Object.assign({}, apis, value);//将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
     return apis;
 }, {});

 export default {
     ...apis,
 }

第二步:使用接口服务

添加api文件夹,并添加ts文件,名字可随意命名

 import requestApi from '@/utils/request';
 import { POST } from '@/utils/const';

 /*
 ***登录***
 */
 export function login(data: any) {
     return requestApi('/api/v1/yingqi/user/login', {
         method: POST,
         data: {
             loginCode: data.username,
             password: data.password
         },
     });
 }

第三步:统一接口入口

在main.js添加如下代码即可

 import servicesApi from '@/services';
 Vue.prototype.$servicesApi = servicesApi

第四步:页面中使用

  this.$servicesApi.getSingleDataById().then((response: any) => {
             const { result } = response
             console.log('result===', result)
         }).catch((error: any) => {
             console.log('error===', error)
         })

其他参数配置文件

export const GET: String = 'GET';
export const POST: String = 'POST';
export const PUT: String = 'PUT';
export const PATCH: String = 'PATCH';
export const DELETE: String = 'DELETE';
export const UPDATE: String = 'UPDATE';
//************************************************【 请求基础路径 】*************************************************
export const configBaseUrl: String = process.env.NODE_ENV === 'development' ?
    'http://127.0.0.1:8880'  // 开发环境
    : 'http://x.x.x.x:8880' // 生产环境
    ;

下一章->uni-app,vue,react,Trao之缓存类封装