uniapp发起网络请求

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前言

在uniapp中实现网络请求是如何实现的呢？在官方的API文档中的网络那一块就有个发起请求，如果想发起网络请求调用uni.request这个方法就ok了，在这个方法里去配置一些参数：接口地址，请求的参数，请求头等等。然后通过success回调就可以拿到返回的数据

发起请求

创建了一个按钮并绑定了click事件，点击按钮的时候就去触发点击事件发起网络请求

get(){
    uni.request({
        url:'http://localhost:3000/search/hot/detail', //接口地址
        method:"GET", //请求类型，默认GET请求
        timeout:5000, //超时时间
        success(res) { //成功回调
            console.log('请求成功',res);
        }
    })
}

可以看到点击按钮时成功发起了网络请求，获取到了返回的数据

当我们需要发起网络请求的时候需要请求参数可以通过配置data参数或者直接在url接口地址拼接上需要请求的参数，data最终发送给服务器的数据是String类型，如果传入的不是String类型会被转换成String类型，转换规则：

• GET方法，会将数据转换为 query string，例如 {keywords:'海阔天空'} 转换后的结果是 keywords=海阔天空
• POST方法且header['content-type']为 application/json 的数据，会进行 JSON 序列化
• POST方法且header['content-type']为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string

get(){
    uni.request({
        url:'http://localhost:3000/search',
        data:{ //设置data配置需要请求的参数
                keywords:'海阔天空'
        },
        success(res) {
                console.log('请求成功',res);
        }
    })
}

get(){
    uni.request({
        url:'http://localhost:3000/search?keywords=海阔天空', //url接口地址拼接请求参数
        success(res) {
                console.log('请求成功',res);
        }
    })
}

封装网络请求

在实际开发中，如果每一次发送请求请求地址，超时时间，请求头等这些重复的操作都写一遍，不仅浪费时间，维护性也不好，所以我们要对uni.request进行封装

但是获取网络请求的异步回调结果用的是callbck函数的方式，这是一个不好的现象，封装的每一层都要传入callback回调函数容易造成回调地狱，可以使用promise封装起来，就不用层层传入了，只要一直return到上一层，直到在page页面你需要回调结果了，再获取这个promise对象，再通过promise对象的then方法获取网络请求的结果

新建一个url.js和request.js。url.js导出服务器地址，request.js封装网络请求

//url.js
export const Apiurl='http://localhost:3000/'

//request.js
import {Apiurl} from '@/common/js/url.js' //导入服务器地址

export function fdPost(url,data={}) {
    return new Promise((resolve, reject)=>{
        uni.request({
            url: Apiurl + url,
            method: 'POST',
            header: {'content-type':'application/x-www-form-urlencoded'},
            data: data,
            success: (res)=>{
                resolve(res.data);
            },
            fail: (err)=>{
                reject(err)
            }
        })
    })
}

封装好之后在main.js里挂载到vue实例上，就可以在page页面调用封装好的uni.request方法，可以看到成功发起了网络请求而且代码也简介了很多

//main.js
import {fdPost} from '@/common/js/request.js'
Vue.prototype.$post = fdPost

//page页面
get(){
    this.$post('search',{keywords:'海阔天空'}).then(res=>{
        console.log(res);
    })
}