最近学习
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
中比较基本的请求封装,我们还可以对其进行优化,比如在使用的时候将不同的页面的请求封装在函数中,这样页面中直接调用函数,保持页面中的代码整洁。如果文中有错误之处还望谅解,提出来后本人也会积极进行修改。本人在学习完知识点后,通过文章进行记录和总结,希望和大家共同进步。