uni-app请求封装

ajax封装

  1. 在src下创建文件夹,如uilts文件夹
  2. 创建request.js文件。用于封装ajax请求
    request.js代码如下:
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)
// 那么需要怎么简写成以上的请求呢? 

优化方法

  1. 在src -> uilts文件夹创建config.js,将端口,域名,协议暴露出来
export default {
    host:'http://localhost:3000'
}
  1. 引入config.js文件
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)
                }
            })
        })
}
  1. index.vue
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接口测试封装是否成功

  • 项目根目录下创建服务器文件,test_server文件夹
  • 创建package.json文件,配置如下:
  • {
    “name”: “test_server”,
    “version”: “1.0.0”
    }
  • 安装koa框架以及路由koa-router
  • npm install koa
  • npm install koa-router
    在test_server文件夹下创建一个存放json数据的文件夹,例如datas
  • 创建json文件,例如data.json
  • 代码如下:
[
	{
		"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后面是需要传入参数

你可能感兴趣的:(uni-app请求封装)