Vue3创建项目(四)axios封装及接口配置

这篇具有很好参考价值的文章主要介绍了Vue3创建项目(四)axios封装及接口配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目结构: 

创一个axios项目,Vue.js,前端,javascript,vue.js

目录

 🍉🍉🍉index.ts

 🍉🍉🍉 api.ts

看完需要预计花费10分钟。

请求拦截器与响应拦截器 

阅读下面代码需先了解以下内容:

   

    请求拦截器:

    请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,每次请求携带token传给后端,统一做处理。

    响应拦截器:

    响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态token失效,需要重新登录的时候,跳转到登录页,对不同状态码做不同处理。

 🍉🍉🍉index.ts

创一个axios项目,Vue.js,前端,javascript,vue.js 

 先检查package.json文件是否已安装axios,没安装先安装。。。

安装命令如下: 

npm i axios -S
import axios from "axios";
//创建axios实例
const service = axios.create({
	baseURL: "https://www.xxxxxxx.site/mock/xxxxx/api",
	timeout: 5000,//超时时间
	headers: {//编译语言
		"Content-type": "application/json;charset=utf-8"
	}
})
//请求拦截
//就是你请求接口的时候,我会先拦截下来,对你的数据做一个判断,或者携带个token给你
service.interceptors.request.use((config) => {//请求的数据
	config.headers = config.headers || {}  // 没有数据的话就设置为空设置为数据
	if (localStorage.getItem("token")) {//先确保登录
		config.headers.token = localStorage.getItem("token") || ""
	}
	return config//必须返回出去,不然请求发不出去
}, error => {
	//处理错误请求
	return Promise.reject(error)
})
//响应拦截:后端返回来的结果
service.interceptors.response.use((res) => {
	const code: number = res.data.code//code是后端的状态码
	if (code !== 200) {
		//请求失败(包括token失效,302,404...根据和后端约定好的状态码做出不同的处理)
		return Promise.reject(res)
	} else {
		//请求成功
		console.log(res, '成功----')
		return Promise.resolve(res.data)
	}
}, (err) => {
	console.log(err, '错误信息的处理')//错误信息的处理
	//处理错误响应
	return Promise.reject(err)
})
//因为别的地方要用,所以就把实例暴露出去,导出
export default service

 🍉🍉🍉 api.ts

//我要用到的一些接口
import service from "@/request/index";
import {ILoginData} from "@/type/login";  //引入接口

// 登录接口
export function login(data: ILoginData) {//接口ILoginData接口的变量名
    return service({
        url: "/login",
        method: "POST",
        data
    })
}

// 商品列表接口
export function getGoodsList(){
    return service({
        url: "/getGoodsList",
        method: "GET"
    })
}

// 用户列表接口
export function getUserList(){
    return service({
        url: "/getUserList",
        method: "GET"
    })
}

// 角色列表接口
export function getRoleList(){
    return service({
        url: "/getRoleList",
        method: "GET"
    })
}

// 权限列表接口
export function getAuthorityList(){
    return service({
        url: "/getAuthorityList",
      method: "GET",
    })
}

 调用封装好的axios方法,下面有个Login登录调用接口示例:

	login(data.ruleForm).then((res) => {
	    console.log(res,'111')
		//使用 localStorage.setItem,将token保存到localStorage
		// res.data.token是后端返回的信息
		localStorage.setItem("token", res.data.token);
		// 并且跳转到首页
		router.push('/')
		}).catch((err)=>{
			console.log(err,'err')
		});

 🍉🍉🍉 看完整示例:

<template>
	<div class="login-box">
		<div>
			<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="70px">
				<el-form-item style="width:400px" label="用户名:" prop="username">
					<el-input v-model="ruleForm.username" type="text" autocomplete="off" />
				</el-form-item>
				<el-form-item style="width:400px" label="密码:" prop="password">
					<el-input v-model="ruleForm.password" type="password" autocomplete="off" />
				</el-form-item>
				<el-form-item>
					<el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
					<el-button class="login-btn" @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts">
	//ts中有一个类型推断
	// ref有个value属性,可以获取值
	import {
		defineComponent,
		reactive,
		toRefs,
		ref
	} from 'vue'
	import {LoginData} from '../type/login'
	import type {FormInstance} from 'element-plus'
	import {login} from '../request/api'
	import {useRouter} from 'vue-router'

	export default defineComponent({
		setup() {
			const data = reactive(new LoginData()); //调用这个类,然后实例化对象
			const router = useRouter(); //  等于$router

			// 表单输入规则
			const rules = {
				username: [{
						required: true, //是否必须字段
						message: "请输入用户名", // 触发的提示信息
						trigger: "blur" // 触发时机: 当失去焦点时(光标不显示的时候),触发此提示
					},
					{
						min: 3, // 最小字符书
						max: 5, // 最大字符数
						message: "用户名长度需要在3-5个字符之间", // 触发的提示信息
						trigger: "blur"
					}
				],
				password: [{
						required: true, //是否必须字段
						message: "请输入密码", // 触发的提示信息
						trigger: "blur" // 触发时机: 当失去焦点时(光标不显示的时候),触发此提示,就会进行校验
					},
					{
						min: 3, // 最小字符书
						max: 6, // 最大字符数
						message: "密码长度需要在3-5个字符之间", // 触发的提示信息
						trigger: "blur"
					}
				]
			}
			//登录
			const ruleFormRef = ref < FormInstance > () //ref获取这个表单的所有值
			// formEl获取到的是一整个原型,里面有很多方法和属性
			// 比如 formEl.resetFields()就可以直接清空表单,具体可以看element的文档
			const submitForm = (formEl: FormInstance | undefined) => {
				if (!formEl) return //没有就返回
				// 验证表单,valid是一个布尔类型
				formEl.validate((valid) => {
					if (valid) { //如果为true,则调用接口,完成登录
						login(data.ruleForm).then((res) => {
							console.log(res,'111')
							//使用 localStorage.setItem,将token保存到localStorage
							// res.data.token是后端返回的信息
							localStorage.setItem("token", res.data.token);
							// 并且跳转到首页
							router.push('/')
						}).catch((err)=>{
							console.log(err,'err')
						});
					} else {
						console.log('error submit!')
						return false
					}
				})
			}


			// 重置
			const resetForm = () => {
				data.ruleForm.username = "";
				data.ruleForm.password = "";
			};
			return {
				...toRefs(data),
				rules,
				ruleFormRef,
				submitForm,
				resetForm
			} //要用到的数据都要导出来
		}
	})
</script>

小提示: vue 请求报错 Uncaught (in promise) 的解决方法 :

创一个axios项目,Vue.js,前端,javascript,vue.js 

如果promise中 reject的错误没有被捕获到就会报这个错误,只要在

Function(data).then(res => {.......})

后面加上.catch((e) => {}),就不会报错了 

创一个axios项目,Vue.js,前端,javascript,vue.js

 

🍓结束语🏆

       后续新出会陆续补充...文章来源地址https://www.toymoban.com/news/detail-770240.html

到了这里,关于Vue3创建项目(四)axios封装及接口配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • axios全局封装取消请求,你可以创建一个 Axios 实例,并为该实例配置默认的 CancelToken

    可以在你的应用中使用这个封装过的 Axios 实例,并通过调用 instance.cancelAll() 方法来取消所有未完成的请求。

    2024年02月04日
    浏览(44)
  • 【Vue项目笔记心得】postman接口测试、axios二次封装、api接口统一管理

    1、postman接口测试 下载地址:Download Postman | Get Started for Free   2、axios二次封装 (1)为什么进行二次封装axios? 请求拦截器、响应拦截器: 请求拦截器 :可以在发请求之前可以处理一些业务 响应拦截器 :当服务器数据返回以后,可以处理一些事情 安装axios: npm install ax

    2023年04月08日
    浏览(43)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(64)
  • Vue3+Axios网络请求封装

    本文将详细介绍一款基于Axios+Typescript封装的网络请求库,该库可以自动携带token、拦截请求和响应等操作,并能够处理请求重复、超时和错误状态码等异常情况。 Axios 是基于Node.js的HTTP客户端,也是一款广泛使用的网络请求库。它具有使用简单、可扩展性高、易用性好等特点

    2024年02月07日
    浏览(49)
  • vue3中axios整体封装

    在 vue3.x 版本中进行封装 使用 promise 封装 post 和 get 方法 api 作为单独模块维护 适配 vue.config.js 中 proxy 代理 结合 async 和 await 1 安装 2 创建http模块 在 src 目录下,创建 request 文件夹,并在该文件夹下,新建 http.js 文件 3 创建单独的api模块 4 在业务代码中使用 5 在vue.config.js中配

    2024年02月17日
    浏览(47)
  • 从头开始创建一个vue3.0项目

    vue3新变化 首次渲染更快,diff算法更快,内存占用更少,打包体积更小 更好的Ts语法支持 Composition API 破坏语法的更新 移除了$on方法 移除过滤器选项(插值表达式不能够再使用过滤器filter) 移除.sync(v-bind不能使用.sync修饰符) Vue3.0相关网址链接  Vue3.0官方地址 Vite 官网地址

    2023年04月26日
    浏览(47)
  • 创建一个vite+vue3项目详细教程

    一、首先打开本地磁盘,找到一个存放路径  这里 我选择将新建项目放置在E盘的demo-vitedemo路径下 二、在该路径处打开命令行cmd  三、在打开的命令行中输入创建命令  注意在搭建之前要安装node.js环境依赖,并且确认你的版本 Vite 需要Node.js版本 14.18+,16+。然而,有些模板需

    2024年02月15日
    浏览(54)
  • Vue3的axios请求封装,请求拦截,相应拦截

    对于三者放在Service.js中封装,方便使用 axios.create  的作用是创建一个新的  axios  实例,该实例可以具有自定义配置。通过使用  axios.create ,您可以为任何 API 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加

    2024年02月03日
    浏览(47)
  • 通过Vscode 简单创建一个vue3+element的项目

    确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 输入构建项目命令,个人推荐如果有cnpm使用cnpm 创建成功之后 完整引入 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单

    2024年02月02日
    浏览(81)
  • 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置axios,utils工具包,vue.fonfig.js配置项 (下)

    这里是创建移动端项目 【Vue】Vue2.x创建项目全程讲解,保姆级教程,手把手教,Vue2怎么创建项目(上) 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(中) 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置ax

    2024年02月13日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包