最近学习
uniapp，将网络请求封装知识点进行记录。
文章目录
前言
uniapp框架自带了请求方式，但是在项目中，我们依然需要进行二次的封装，这样才能更方便的进行管理和使用。写这一篇文章为了学习记录，有不足之处还请谅解和指出，我会进行改进，互相进步。下面让我们一步步来完成封装~
一、目录规划
service文件夹：用来存放封装请求的地方；
request文件夹：用来存放具体编写请求文件的地方；
index.js ：统一的出口文件，后续使用请求只需要引入这个文件；
config.js ：配置请求基本信息的文件；
request.js ：编写具体请求的文件；
二、搭建基本结构
1.request.js
class XCRequest {
}
export default XCRequest
2.index.js：
import XCRequest from '@/service/request/request'
export default new XCRequest()
这样我们就在request.js中定义了一个类，然后在index.js文件中实例了这个类并导出，后续只需要引用这个实例对象即可。
三、实现请求
1.request.js:
class XCRequest {
constructor(config) {
}
request(config){
uni.request({
...config,
success: (res) => {
console.log(res)
},
fail(err) {
console.log('请求错误', err)
}
})
}
}
export default XCRequest
2.config.js:
const baseURL = 'https://api.vvhan.com' //基本URL地址
const timeout = 1000 //超时时间
export {
baseURL, timeout }
3.index.js:
import XCRequest from '@/service/request/request'
import {
baseURL, timeout } from '@/service/request/config'
const xcRequest = new XCRequest({
baseURL, timeout })
export default xcRequest
这里我在类中定义了request函数，在函数中调用uni.request方法发起了请求，然后在config.js中定义基本的请求地址和超时时间，然后在实例化类的时候传入进去，不过我们暂时没在constructor中进行使用，下面我们发起一个请求测试。
4.发起请求测试
import xcRequest from '@/server/index.js'
xcRequest.request({
url: 'https://api.vvhan.com/api/reping',
methods: 'get'
})
很显然，我们的封装成功了，但是这样的封装太简陋了，我们下面进行完善。
四、完善封装
1.添加拦截器
// request.js 文件
class XCRequest {
constructor(config) {
//uniapp的拦截器
uni.addInterceptor('request', {
//请求触发前的回调函数
invoke(args) {
// agrs就是在调用uni.request时候的传参
// request 触发前拼接 url 和超时时间
args.url = config.baseURL + args.url //将初始化时传入的url和超时时间进行设置
args.timeout = config.timeout
//这里可以加入请求加载动画
},
//请求成功的回调函数
success(args) {
//这里可以将请求加载动画进行关闭
// 请求成功后，修改code值为1
// args.data.code = 1
},
//拦截失败回调函数
fail(err) {
console.log('interceptor-fail', err)
},
//拦截完成回调函数
complete() {
}
})
}
request(config) {
uni.request({
...config,
success: (res) => {
},
fail(err) {
}
})
}
}
export default XCRequest
这样就给请求添加上了拦截器，可以让我们在请求前和请求完成后执行一些操作。下面我们在进行优化，将请求结果返回为一个promise对象。
2. 封装请求返回promise对象
// request.js 文件
class XCRequest {
constructor(config) {
//uniapp的拦截器
uni.addInterceptor('request', {
//请求触发前的回调函数
invoke(args) {
// agrs就是在调用uni.request时候的传参
// request 触发前拼接 url 和超时时间
args.url = config.baseURL + args.url //将初始化时传入的url和超时时间进行设置
args.timeout = config.timeout
//这里可以加入请求加载动画
},
//请求成功的回调函数
success(args) {
//这里可以将请求加载动画进行关闭
// 请求成功后，修改code值为1
// args.data.code = 1
},
//拦截失败回调函数
fail(err) {
console.log('interceptor-fail', err)
},
//拦截完成回调函数
complete() {
}
})
}
request(config) {
//返回promise对象
return new Promise((resolve, reject) => {
uni.request({
...config,
success: (res) => {
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}
}
这样就可以在我们调用request方法后得到一个包含请求数据的promise对象了，下面我们在进行最后一个完善，细分不同的请求类型。
3. 封装不同请求类型
// request.js 文件
class XCRequest {
constructor(config) {
//uniapp的拦截器
uni.addInterceptor('request', {
//请求触发前的回调函数
invoke(args) {
// agrs就是在调用uni.request时候的传参
// request 触发前拼接 url 和超时时间
args.url = config.baseURL + args.url //将初始化时传入的url和超时时间进行设置
args.timeout = config.timeout
//这里可以加入请求加载动画
},
//请求成功的回调函数
success(args) {
//这里可以将请求加载动画进行关闭
// 请求成功后，修改code值为1
// args.data.code = 1
},
//拦截失败回调函数
fail(err) {
console.log('interceptor-fail', err)
},
//拦截完成回调函数
complete() {
}
})
}
request(config) {
//返回promise对象
return new Promise((resolve, reject) => {
uni.request({
...config,
success: (res) => {
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}
get(config) {
return this.request({
...config,
method: 'get'
})
}
post(config) {
return this.request({
...config,
method: 'post'
})
}
// 还可以添加更多的请求类型
}
这样就可以如果是get请求调用get方法即可，post请求调用post方法，更加方便。我们来进行测试一下。
4.测试请求
import xcRequest from '@/server/index.js'
async created() {
const res = await xcRequest.get({
url: '/index.php',
data: {
_mall_id: '1',
r: 'api/home/indexs'
}
})
console.log(res)
}
总结
上面我们成功完成了一个在uniapp中比较基本的请求封装，我们还可以对其进行优化，比如在使用的时候将不同的页面的请求封装在函数中，这样页面中直接调用函数，保持页面中的代码整洁。如果文中有错误之处还望谅解，提出来后本人也会积极进行修改。本人在学习完知识点后，通过文章进行记录和总结，希望和大家共同进步。