第一章: uniapp引入axios异步框架

这篇具有很好参考价值的文章主要介绍了第一章: uniapp引入axios异步框架。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一章: uniapp引入axios异步框架

在学习uniapp的过程中,发现uniapp框架默认集成request请求框架存在问题,发送请求时在header中塞入token值,而后台接收不到,也就是说uniapp默认的request请求框架,不支持在请求头中放入token的做法。
基于以上原因,笔者确定放弃默认的请求框架,引入第三方axios请求框架。

那么该怎么说呢?默认三步骤:一引入,二配置,三测试

第一步、引入axios组件

这里笔者使用的npm工具安装axios组件,同时指定版本,如果不指定版本默认会安装最新版本,最新版本的axios组件在真机测试阶段会出现请求不适配的问题,这里先按下不谈,后续文章会说明情况。

npm i axios@0.27.2

第二步、创建并配置axios.js

注意:一定要配置axios.defaults.adapter 来适配uniapp框架。
同时在请求和响应拦截中,对token进行设置和获取操作,在前后端分离的项目中以token作为用户请求后台的唯一合法依据。

import Vue from 'vue'
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

const service = axios.create({
	baseURL: "http://127.0.0.1:7777/",
	timeout: 6000,
})

// 请求拦截
service.interceptors.request.use(config => {
		// 非登录接口添加token
		if (config["url"].indexOf("login") < 0) {
			config.headers['token'] = uni.getStorageSync('token');
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	});

// 响应拦截
service.interceptors.response.use(res => {
	if (res.status == 200) {
		// 请求成功后设置token
		if (res.data.code == 100) {
			uni.setStorageSync('token', res.header["token"]);
		}
		return res.data;
	} else {
		return Promise.reject(res.data.msg);
	}
});


// 自定义适配器 , 适配uniapp语法
axios.defaults.adapter = function(config) {
	return new Promise((resolve, reject) => {
		let settle = require('axios/lib/core/settle');
		let buildURL = require('axios/lib/helpers/buildURL');
		let buildFullPath = require('axios/lib/core/buildFullPath');
		let fullurl = buildFullPath(config.baseURL, config.url);
		uni.request({
			method: config.method.toUpperCase(),
			url: buildURL(fullurl, config.params, config.paramsSerializer),
			header: config.headers,
			data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			},
		});
	})
}
export default service

同时别忘了将配置的axios.js文件引入到main.js
配置main.js。由于笔者在uniapp中使用的Vue2.x版本,所以以下main.js内写法与Vue3.x的写法不同,请读者注意粘贴。

import Vue from 'vue'
import App from './App'
import uView from "uview-ui";
import axios from './common/axios/axios.js'

Vue.config.productionTip = false

Vue.use(uView);
Vue.prototype.$api = axios

App.mpType = 'app'
const app = new Vue({
	...App
})

app.$mount()

完成以上工作,uniapp引入axios组件的工作就完成了,那么下面就开始测试,是否可以正常访问了。

第三步、测试是否配置成功

1、由于由于跨域问题,于是笔者在后台的接口类上配置跨域注解。
CrossOrigin: 该注解用于标注该接口可被跨域访问。可能读者会想为什么不在前端配置代理来实现跨域呢?当前为了测试组件是否引入成功,所以一切从简,以测试结果为主。前端配置代理实现跨域请继续阅读下文。

@CrossOrigin
@RestController
public class MembersController {

    @Resource
    private MembersService membersService;


    /**
     * 登录账号
     * @param param 账号和密码
     * @return 返回 Ret
     */
    @PostMapping("/login")
    public Ret login(@RequestBody LoginBo param){
        return membersService.login(param);
    }
}

逻辑处理中心:

@Service
public class MembersService extends ServiceImpl<MembersMapper, Members> implements IService<Members> {


    @Resource
    private MembersMapper membersMapper;


    /**
     * 登录账号
     * @param param 账号和密码
     * @return 返回 Ret
     */
    public Ret login(LoginBo param) {
        // 1、验参
        String account = param.getAccount();
        // 2、查询结果并判断
        QueryWrapper<Members> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("account", account);
        Members members = membersMapper.selectOne(queryWrapper);
        if ( members == null ) {
            return Ret.builder().code(300).msg("登录失败!").build();
        } else if ( !Objects.equals(param.getPassword(), members.getPassword()) ) {
            return Ret.builder().code(300).msg("密码填写错误!").build();
        }
        // 3、封装返回登录成功日志信息
        LoginVo loginVo = LoginVo.builder()
                .account(account)
                .avatar(members.getAvatar())
                .token(account)
                .nickName(members.getNickName())
                .build();
        return Ret.builder().code(100).data(loginVo).build();
    }
}

uniapp中的login.vue页面
这个$api 是否眼熟,是的就是在main.js中配置的全局别名。

methods: {
	login() {
		let data = {
			...this.form
		}
		this.$api({
			method: 'post',
			url: '/login',
			data: data
		}).then(res => {
			if (res.code == 100) {
				// 存入本次缓存中
				uni.setStorageSync('userInfo', res.data);
				this.$u.toast('登录成功');
				uni.navigateBack();
			} else {
				this.$u.toast(res.msg);
			}
		}).catch(err => {
			console.log(err)
		});
	},
},

测试结果如下:
输入错误的账号和密码,请求状态 200,表示请求成功的意思,也就是表示axios组件引入成功了。
uniapp使用axios,uniapp和axios,uni-app,javascript,前端

第四步、如何配置前端的代理来实现跨域呢?

这里需要用到manifest.json文件,点击该文件并选择源码视图
uniapp使用axios,uniapp和axios,uni-app,javascript,前端

并在其中配置以下信息

"h5": {
	"devServer": {
		"hot": true,
		"port": 8080,
		"disableHostCheck": true,
		"proxy": {
			"/api": {
				"target": "http://127.0.0.1:7777/",
				"changeOrigin": true,
				"secure": false,
				"pathRewrite": {
					"^/api": ""
				}
			}
		}
	}
}

同时修改axios.js文件

const service = axios.create({
	baseURL: "/api",
	timeout: 6000
})

这时就可以删除后台接口上的 @CrossOrigin注解了。
下面测试结果如下:
uniapp使用axios,uniapp和axios,uni-app,javascript,前端
测试成功,这样就实现了通过前端配置代理来解决跨域问题,同时这样服务器会更安全一些,避免被其他的前台所访问。以上是笔者在学习uniapp整合axios过程中的一些总结,希望可以对各位读者有所帮助。文章来源地址https://www.toymoban.com/news/detail-758672.html

到了这里,关于第一章: uniapp引入axios异步框架的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 后端Springboot框架搭建APi接口开发(第一章)

    本文章以IDEA为开发工具,使用SSM框架进行项目编写 我们用一个简单的用户表进行操作演示 首先创建 Data 数据库 创建 User 数据表,表中包含 用户邮箱 , 用户姓名 , 用户密码 放点数据进去 打开IDEA,在右上角点击NewProject。创建新的项目 选择Spring Initializr框架,依次输入项目

    2023年04月08日
    浏览(44)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(71)
  • C#使用MongoDB-第一章 基本操作

    这里在C#中所使用的连接MongoDB数据库的依赖库为 MongoDB.Driver ,使用前先到Nuget中进行安装。 MongoDB.Driver 中,用于连接数据库的类型为 MongoClient 。 注意, MongoClient 对象表示的是数据库的连接池,因此我们在开发项目时,大多数情况只需要创建一个 MongoClient 实例就够了。 标准

    2024年01月17日
    浏览(42)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(46)
  • 使用 Python 和 Pygame 制作游戏:第一章到第五章

    原文: inventwithpython.com/pygame/chapter1.html 译者:飞龙 协议:CC BY-NC-SA 4.0 在阅读本书之前,如果您了解一些 Python 编程知识(或者知道如何使用 Python 之外的其他语言进行编程),可能会有所帮助;但是即使您没有,您仍然可以阅读本书。编程并不像人们想象的那么难。如果您遇

    2024年01月17日
    浏览(82)
  • 在.NET Framework中使用RocketMQ(阿里云版)实战【第一章】

    章节 第一章:https://www.cnblogs.com/kimiliucn/p/17662052.html 第二章:https://www.cnblogs.com/kimiliucn/p/17667200.html 作者:西瓜程序猿 主页传送门:https://www.cnblogs.com/kimiliucn/ 在开发某一个需求的时候,领导要求使用RocketMQ(阿里云版) 作为消息队列。使用的版本是5.x,目前也已经没有4.x购买的

    2024年02月11日
    浏览(39)
  • uniapp 使用axios

    注意: 如果你的uniapp项目中还没有“package.json”文件,请先初始化项目: request.js 解释:为了解决uniapp 适配axios请求,避免报 adapter is not a function 错误 login.js login.vue

    2024年02月11日
    浏览(26)
  • 小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题

    我们一般使用小程序插件的时候,喜欢将其放在分包中,因为插件体积会打包进主包内,很容易造成主包体积超过 2M 从而无法发布,我们暂且叫这个有插件的分包叫分包P,这时候另外两个业务分包XY,想引入这个分包P里的插件(插件里包含了几个组件和一些接口函数)。 方

    2024年02月02日
    浏览(46)
  • uniapp微信小程序使用axios(vue3+axios+ts版)

    \\\"vue\\\": \\\"^3.2.45\\\",  \\\"axios\\\": \\\"^1.4.0\\\",  \\\"axios-miniprogram-adapter\\\": \\\"^0.3.5\\\", yarn add axios axios-miniprogram-adapter 在 utils 创建 utils/request.ts 文件 在 src 目录下创建 src/api/config 文件夹 config文件夹中创建home.ts文件,首页的接口都放在里面统一管理  和 config 文件夹同级创建home.ts文件,统一管理请求

    2024年02月16日
    浏览(67)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包