调用api接口

我们平常是怎么调用接口的呢？在Vue中我们平常通过axios这个库来调用就接口，但是在uniapp进行开发，那么就要借用uniapp的库来进行开发，接下来我们一起来探究下。

一.uni.request(OBJECT)

作用:发送网络请求

OBJECT参数说明：

1.url

类型:String

必填:是

默认值:无

说明:开发者服务器接口地址

2.data

类型:Object/String/ArrayBuffer

必填:是

默认值：无

说明;请求的参数

3.header

类型:Object

必填:否

默认值;无

说明:设置请求的header,header中不能设置Referer

平台差异说明:APP ,H5端会自动带上cookie,且H5端不可手动修改

4.method

类型: String

必填:否

默认值:GET

5.timeout

类型：Number

必填：否

默认值：超过时间,单位ms

6.dataType

类型：String

必填：否

默认值:json

说明:如果设为json,会尝试对返回的数据做一次JSON.parse

7.responseType

类型：String

必填：否

默认值：text

说明：设置响应的数据类型,合法值:text,arraybuffer

8.sslVerify

类型:Boolean        

必填:否

默认值:true        

说明:验证ssl证书

9.success

类型:Function

必填:否

默认值:无

说明:收到开发者服务器成功返回的回调函数

10.fail

类型:Function

必填:否

默认值：无

说明:接口调用失败的回调函数

11.complete

类型:Function

必填:否

默认值：无

说明：接口调用结束的回调函数(调用成功，失败都会执行)

二.method有效值

注意:method有效值必须大写，每个平台支持的method有效值不同，详情见下表。

三.success返回参数说明

 data数据说明

最终发送给服务器的数据是String类型，如果传入的data不是String类型,会被转换成String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string

四.使用uniapp发送一个成功的请求

我使用的是mockfast来模拟一个服务器从而达到发送请求的目的。

1.准备好一个mock来模拟数据

 

2.给按钮绑定一个点击事件，通过success成功的回调来获取数据

代码：

<template>
	<view class="">
 <button type="warn" @click="fn">点击发送请求</button>	
	 {{aa}}
	</view>
 

</template>

<script>
export default {
 data () {
    return {
      aa:''
    }
  },
  methods: {
	  fn(){
		uni.request({
		    url: 'https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test', //仅为示例，并非真实接口地址。
		    success: (res) => {
		       this.aa=res.data.name

		    }
		});
		
		}
     }

}
</script>

<style>
	
</style>

图示：

 

 

五.fail失败之后的回调

1.将url的地址进行修改

 打印后的结果

 

 

六.测试一下complete

说明：接口调用结束的回调函数(调用成功，失败都会执行)

1.接口调用失败后

 

  

2.接口调用成功执行

 

 

3.应用场景用

请求完成后的一些相应操作

七.封装一个uni.request

对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。

步骤:

1.先在目录下创建unils和common 2个文件夹

 utils是存放工具类的，common用来放置常用方法的

之后在utils中创建request.js用来放置uni.request的请求方法，在对其进行简单的封装

2.requset.js 代码（utils文件夹里面）

import operate from '../common/operate.js'
// vuex 的使用  详情参考官网 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'  

export default class Request {
    http(param) {
        // 请求参数
        var url = param.url,
            method = param.method,
            header = {},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

        //拼接完整请求地址
        var requestUrl = operate.api + url;
       //拼接完整请求地址（根据环境切换）
       // var requestUrl = operate.api() + url;

        //请求方式:GET或POST(POST需配置
        // header: {'content-type' : "application/x-www-form-urlencoded"},)
        if (method) {
            method = method.toUpperCase(); //小写改为大写
            if (method == "POST") {
                header = {
                    'content-type': "application/x-www-form-urlencoded"
                };
            } else {
                header = {
                    'content-type': "application/json"
                };
            }
        }

        //加载圈
        if (!hideLoading) {
            uni.showLoading({
                title: '加载中...'
            });
        }

        // 返回promise
        return new Promise((resolve, reject) => {
            // 请求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判断 请求api 格式是否正确
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            title: "api错误" + res.errMsg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 将结果抛出
                    resolve(res.data)
                },
                //请求失败
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //请求完成
                complete() {
                    //隐藏加载
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}

3.在common 中分别创建 operate.js

1.operate.js 用来放置请求接口 api 地址

export default {
    //接口
    api: "http://192.168.208.126:8080",
}

根据小程序环境 切换接口地址

export default {
	//接口
	api: function() {
	    let version = wx.getAccountInfoSync().miniProgram.envVersion;
	    switch (version) {
		case "develop": //开发预览版
			return "https://www.baidu.com/"
			break;
		case 'trial': //体验版
			return "https://www.baidu.com/"
			break;
		case 'release': //正式版
			return "https://www.baidu.com/"
			break;
		default: //未知,默认调用正式版
			return "http://www.baidu.com/"
			break;
	}
}

4.使用方法一(全局请求)

在跟目录创建api文件夹：在创建api.js

api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可

import Request from '@/utils/requset.js'
let request = new Request().http

//全局定义请求头
export default {
    // 请求样式
    classifyLeft: function(data) {
        return request({
            url: "/category/list", //请求头
            method: "GET", //请求方式
            data: data, //请求数据
        })
    },
}
/*
请求样式：
    自定义名字: function(data) {
        return request({
            url: "/banner", //请求头
            method: "GET", //请求方式 
            data: data,    //请求数据
            token: token, // 可传  
            hideLoading: false, //加载样式
        })
    },
*/

api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局 调用。下面只介绍全局调用

在mian.js中导入api.js

1. 在main.js 中引入api.js
        import api from '@/common/api.js'
        Vue.prototype.$api = api
2. 在页面中调用
        //不传参数
        this.$api.sendRequest().then((res) => {
            console.log(res);
        })
        //传参
        this.$api.sendRequest({参数}).then((res) => {
            console.log(res);
        })

5.使用方法二（页面单独引入）

user.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 user.js中请求即可

import Request from '@/utils/requset.js'
import operate from '@/common/operate.js'
let request = new Request().http

// 按需引入的 请求头
export const getUserInfo= function(data) {    
    return request({
	url: "order/user ",		
        method: "POST",
	data: data,
	token: operate.isToken()
    })
}

页面中使用

//引入
import {
    getUserInfo
} from '@/api/user.js'

//放入生命周期
init() {
    //用户信息
    getUserInfo().then((res) => {
	console.log(res);
    })
},

接口的封装参考：https://juejin.cn/post/7023983465892675614