uni-app封装网络请求（上）

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

一、环境变量配置

新建api文件夹，创建global.js文件，用于区分环境，Hbuilderx编辑运行是开发环境development，发行后自动切换成生产环境。

let baseUrl = ''
if (process.env.NODE_ENV === 'development') {
	console.log('开发环境')
	baseUrl = 'http://localhost:3000'
} else {
	console.log('生产环境')
	baseUrl = ''
}
export default {
	baseUrl
}

二、 uni.request封装网络请求

新建request.js,导入global.js，编写封装代码。具体包含请求配置、设置拦截器、发起网络请求、请求方式配置。

导入global.js

import global from './global.js'

config常用请求配置项：

• baseURL: 基础的url，将自动加在接口地址 url 前面。
• header：设置请求的 header，header 中不能设置 Referer。
• dataType: 告诉服务器，我要想什么类型的数据。 如果设为 json，会尝试对返回的数据做一次 JSON.parse。
• method：请求方式。默认是GET,有效值包括：GET、POST、PUT、DELETE、CONNECT等。
• responseType： 设置响应的数据类型。合法值：text、arraybuffer。
• timeout： 超时时间，单位 ms。
• data: 请求的参数。
• success: 收到开发者服务器成功返回的回调函数。
• fail：接口调用失败的回调函数。
• complete： 接口调用结束的回调函数（调用成功、失败都会执行）。

更多详细配置可参考官网

config {
    baseUrl: global.baseUrl,
    header: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'token'
    },
    dataType: "json",
    method: "GET",
    responseType: "json",
    success() {},
    fail() {},
    complete() {}
}

基于 Promise 的网络请求

由于篇幅较长，将在下一篇uni-app封装网络请求（下）做详细介绍。敬请期待。

三、请求方式封装

上述定义好网络请求，当项目中发送不同请求时，可以直接附加请求方式，完成封装代码。具体如下：

// get请求
get(url, data, options) {
    if (!options) {
            options = {}
    }
    options.url = url
    options.data = data
    options.method = 'GET'
    return this.request(options)
},
// post请求
post(url, data, options) {
    if (!options) {
            options = {}
    }
    options.url = url
    options.data = data
    options.method = 'POST'
    return this.request(options)
},
// put请求
put(url, data, options) {
    if (!options) {
            options = {}
    }
    options.url = url
    options.data = data
    options.method = 'PUT'
    return this.request(options)
},
// delete请求
delete(url, data, options) {
    if (!options) {
            options = {}
    }
    options.url = url
    options.data = data
    options.method = 'DELETE'
    return this.request(options)
}

具体使用以及请求，将会在下一篇文章继续，请大家持续关注！！