关于flyio对于快应用的http请求的封装(开箱即用)

第一步 肯定是对于第三方的安装下载

npm install flyio

更多关于 flyio 可以直接访问官网

当我们安装成功就可以开始封装util文件了

1.http.js


var fetch = require("@system.fetch")
var Fly = require("../../node_modules/flyio/dist/npm/hap")//引入路径根据自己放置的目录配置
var service = new Fly(fetch)
import storage from '@system.storage'	// 快应用 自带 本地存储
import prompt from '@system.prompt'   // 快应用自带 提示框
service.config.baseURL = '';//  设置baseURL

// 简单的设置请求头
service.interceptors.request.use((request) => {
	//给所有请求添加自定义header
	request.headers["X-Tag"] = "flyio";
	storage.get({
		key: 'A1',
		success: function (data) {
			let token = data
			console.log(token);
			if (token) {
				//设置 http 请求 携带 请求头
				request.headers["Authorization"] = token;
			}
		},
	});
	return request;
})
// 设置 请求拦截 
service.interceptors.response.use(
    (response) => {
		if(response.data.code == 200) {
			return response
		} else {
			return prompt.showToast({
				message: response.data.msg
			})
		}
    },
    (err) => {
        //请求出错,根据返回状态码判断出错原因
        console.log(err,'996')
      //  你也是 9 9 6 么
        if (err.status == 0) {
            return prompt.showToast({
				message: '网络错误'
			})
        } else if (err.status == 1) {
            return "网络连接超时"
        } else if (err.status == 401) {
            return "用户未登录"
        } else {
            if (err.response.data.message) {
                return err.response.data.message
            } else {
                return '请求数据失败,请稍后再试'
            }
        };
        // Do something with response error
    }
)

export default service

设置好 http.js 当然 是去 引用

import service from ''  // http.js 的地址 
export default {
    // 获取用户名
    getPhoneCode (data) {
        return service.post('app/tsUser/getPhoneCode', data)
    }
}

上面的两步完成 直接 将 api 设置到全局挂载即可

<script>
/**
 * 应用级别的配置,供所有页面公用
 */
import app from '@system.app'
import prompt from '@system.prompt'
import webview from '@system.webview'
import router from '@system.router'
import servers from './tools/api.js'  // 设置好 自己的 api 路径 
/* @desc: 注入方法至全局 global,以便页面调用 */
const hook2global = global.__proto__ || global

hook2global.servers = servers
//  必须 设置 

export default {
  
  onCreate() {
    servers;
    //  必须 设置 
  },
}
</script>
<style>
</style>

如果 你已完成 上面的步骤那么恭喜你 可以直接使用了

//附上 登录 Login 实例
  //登录 
  Login() {
    var phone = this.form.username;
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      return prompt.showToast({
        message: '请输入正确的手机格式'
      })
    } else if (this.form.code == '') {
      return prompt.showToast({
        message: '请输入验证码'
      })
    } else {
      servers.LoginCode(this.form).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          storage.set({
            key: 'A1',
            value: res.data.token
          }) // 快应用 存储 
          router.push({
            uri: 'pages/DemoDetail'
          })
        }
      })
    }
  },

若有所帮助,还望一键三连 ,有疑问 可下方留言 。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值