ajax封装
export default function(url,data={},method="GET"){
// 发起请求
uni.request({
url,
data,
method,
success:(res) => {
console.log(res)
}
})
}
函数里面的形参各表示:
url : 将被调用的url形参,
data:需要传入参数的形参(为什么传入的是一个空对象呢?原因:是因为在调用接口时,某些接口是不需要传入参数的),
method:请求的方法。默认为GET请求
假设有index.vue的组件发请求时如下:
1. 引入封装ajax请求的文件
import request from '@/request.js'; // 引入文件路径按封装的请求文件路径而定,此处为演示
export default (
data(){
return {
imageList:[]
}
},
methods:{
// 获取详情接口
getDetail(){
request (
'http://localhost:3000/getDeatail',
data
)
}
}
)
这里有个小问题,当我发起请求的时候,虽然已经拿到了数据,但是需要返回一个结果,将结果给到data的imageList数据,实现渲染
修改代码如下:
request.js
export default function(url,data={},methods='GET'){
return new Promise((resolve,reject) =>{
uni.request({
url,
data,
method,
success:(res) => {
// 当异步发起请求成功,则返回数据(return new Promise)
/*
好处:通过resolve可以修改返回的Promise对象,
并且将res.data通过export default暴露出去,
在组件中通过使用async/await接收返回的数据结果
*/
resolve(res.data)
},
fail:(error) => {
// 如果异步请求成功,则返回错误
reject(error)
}
})
})
}
index.vue
import request from '@/request.js'
export default (
methods:{
data() {
return {
imageList:[]
}
},
// 获取详情接口
// 由于封装好的请求是通过返回Promise对象的形式
// 那么在请求接口的时候可以考虑使用async/await来执行异步请求操作
// async代表的是可执行的异步函数
async getDetail(){
// 将请求到的数据,用getData接收
// await代表的是等待封装好的ajax请求返回的异步结果
// 声明变量getData 是用于接收通过export default暴露出来的返回结果数据
let getData = await request ('http://localhost:3000/getDeatail',data)
//更新数据
this.imageList = getData
}
}
)
优化目的
async getDetail(){
// 将请求到的数据,用getData接收
// await代表的是等待封装好的ajax请求返回的异步结果
// 声明变量getData 是用于接收通过export default暴露出来的返回结果数据
let getData = await request ('http://localhost:3000/getDeatail',data)
//更新数据
this.imageList = getData
}
// 由于url看起来过长,并且当端口,域名,协议这些是固定的时候,可以简写如下
request ('/getDeatail',data)
// 那么需要怎么简写成以上的请求呢?
优化方法
export default {
host:'http://localhost:3000'
}
import config from './config.js'
export default function(url,data={},methods='GET'){
return new Promise((resolve,reject) =>{
uni.request({
// url: 'http://localhost:3000' + url; 该方法不友好,动态修改不灵活
url: config.host + url,
data,
method,
success:(res) => {
// 当异步发起请求成功,则返回数据(return new Promise)
/*
好处:通过resolve可以修改返回的Promise对象,
并且将res.data通过export default暴露出去,
在组件中通过使用async/await接收返回的数据结果
*/
resolve(res.data)
},
fail:(error) => {
// 如果异步请求成功,则返回错误
reject(error)
}
})
})
}
import request from '@/request.js'
export default (
methods:{
data() {
return {
imageList:[]
}
},
async getDetail(){
let getData = await request (
'/getDeatail',
data,
//如果是post请求方法则修改为,如果是get请求方法,则可以不写。已经默认了
//method:'post')
//更新数据
this.imageList = getData
}
}
)
为什么要将端口,域名,协议单独写在一个文件里面呢?
原因:如果端口,协议,域名需要修改时,在request.js视为单纯的ajax请求的函数,最好是什么都不要去修改它。尽可能的降低耦合度。那么需要修改的端口,域名以及协议单独的拿出来写在这个config.js文件里面。当文件里发生改变时,则会动态修改request.js里面的url
node接口测试封装是否成功
[
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
},
{
"title":"测试接口",
"timer":"2020-05-30",
"address":"广东省深圳市",
"name":"webapi",
"age":"12"
}
]
在test_server文件夹下创建server.js文件,配置接口
代码如下:
// 引入koa框架以及路由
let Koa = require('koa');
let KoaRouter = require('koa-router');
// 生成应用以及路由实例
const app = new Koa();
const router = new KoaRouter();
// 核心代码
// 测试接口
router.get('/',(ctx,next)=>{
// 1.获取请求的参数
//2.根据请求的地址和参数处理数据
//3.响应数据
ctx.body = '服务器返回的数据';
})
// 接口
let datas = require('./datas/data.json') // 引入的json文件按自己实际创建的文件路径位置为准,此处为演示
router.get('/getDetail',(ctx,next) => {
// 1.获取请求的参数
let req = ctx.query.req;
//2.根据请求的地址和参数处理数据
let booksArr = datas;
//3.响应数据
ctx.body = booksArr;
})
// 使用路由器以及路由
app.use(router.routes()); //声明使用路由
app.use(router.allowedMethods()); // 允许使用路由的方法
// 监听端口
app.listen('3000',()=>{
console.log('服务器启动成功');
console.log('服务器地址: http://localhost:3000')
})
最后打开服务器窗口,运行node server.js命令,将url输入到浏览器。如下
http://localhost:3000/getDetail?req=123 //req后面是需要传入参数