网络库axios(ajax封装，特性--浏览器中创建XmlHttpRequest）
官网： www.axios-http.cn/docs/intro
特性：
- 浏览器中创建XmlHttpRequest
- 基于promise的网络请求库
- 拦截器（拦截网络请求） 注；之前的全局前置导航守卫（拦截路由，跳转时拦截）
调用后端接口，获取后端数据:ajax、fetch、axios库
- cdn引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> - 脚手架安装： npm install axios
一、axios使用简单示例
Login.vue
<template>
<div class="g-container">
<div class="g-wrapper">
<h2>xx平台</h2>
<form @submit.prevent="bindLogin">
<input
type="text"
name="name"
placeholder="请输入用户"
v-model="user.name"
/><br />
<input
type="password"
name="password"
placeholder="请输入密码"
v-model="user.password"
/><br />
<p>{{ message }}</p>
<input type="submit" class="m-login-btn" value="登录" />
</form>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
user: {
name: "root",
password: "root",
},
message: "",
};
},
methods: {
bindLogin() {
axios({
method: "post",
url: "http://10.7.163.142:8089/api/login",
//post请求参数用data选项，get请求参数用params选项
data: {
username: this.user.name,
password: this.user.password,
},
})
.then((res) => {
const { resultCode, resultInfo } = res.data; //解构
if (resultCode === 1) {
this.$router.push({ path: "/home" }); // 跳转主界面
} else {
this.message = "用户名或密码出错!";
}
})
.catch((error) => {
console.log("error", error);
});
},
},
};
</script>
<style lang="scss" scoped>
.g-container {
width: 100%;
height: 100vh;
background-color: #2b3c4d;
position: relative;
.g-wrapper {
width: 500px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h2 {
text-align: center;
color: white;
margin-bottom: 20px;
}
form {
width: 100%;
background-color: white;
border-radius: 8px;
text-align: center;
padding: 20px 0;
input {
width: 80%;
margin: 20px 0;
outline: none;
height: 30px;
border: 1px solid gray;
border-radius: 5px;
text-indent: 10px;
}
.m-login-btn {
background-color: #409eff;
color: white;
height: 40px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
&:hover {
cursor: pointer;
background-color: #64a5e7;
}
}
}
}
}
</style>
二、axios实例封装
1. 创建一个utils工具文件夹→request.js封装axios实例
import axios from 'axios'
//封装axios实例
const instance = axios.create({
baseURL:'http://10.7.163.142:8089',//服务器根地址
timeout:3000//超时时间3s
})
export default instance
2. 创建一个api文件夹→index.js封装项目中用到的所有的接口
import instance from '@/utils/request.js'
/**
* 登录接口
* @param {*} username
* @param {*} password
* @returns
*/
export const RequestLogin = (username,password) => {
return instance({
method: 'post',
url: '/api/login',
//post请求参数使用data选项, get参数 params选项
data: {
username,
password,
},
})
}
3.Login.vue
<template>
<div class="g-container">
<div class="g-wrapper">
<h2>xx平台</h2>
<form @submit.prevent="bindLogin">
<input
type="text"
name="name"
placeholder="请输入用户"
v-model="user.name"
/><br />
<input
type="password"
name="password"
placeholder="请输入密码"
v-model="user.password"
/><br />
<p>{{ message }}</p>
<input type="submit" class="m-login-btn" value="登录" />
</form>
</div>
</div>
</template>
<script>
import { RequestLogin } from '@/api/index.js'
export default {
data() {
return {
user: {
name: 'root',
password: 'root',
},
message: '',
}
},
methods: {
async bindLogin() {
// 调用登录接口 判断账户是否正确，如果正确跳转到主界面
// 没配置响应拦截器
//const res = await RequestLogin(this.user.name, this.user.password)
//const { resultCode,resultInfo } = res.data//解构
//配置响应拦截器return response.data过滤
const data = await RequestLogin(this.user.name, this.user.password)
const { resultCode,resultInfo } = data//解构
if (resultCode === 1) {
// 保存用户昵称和头像
const userInfo = {nick:resultInfo.nick,headerimg:resultInfo.headerimg}
this.$store.dispatch('member/saveUser',userInfo)
// 跳转主界面
this.$router.push({ path: '/home' })
} else {
this.message = '用户名或密码出错!'
}
},
},
}
</script>
<style lang="scss" scoped>
.g-container {
width: 100%;
height: 100vh;
background-color: #2b3c4d;
position: relative;
.g-wrapper {
width: 500px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
h2 {
text-align: center;
color: white;
margin-bottom: 20px;
}
form {
width: 100%;
background-color: white;
border-radius: 8px;
text-align: center;
padding: 20px 0;
input {
width: 80%;
margin: 20px 0;
outline: none;
height: 30px;
border: 1px solid gray;
border-radius: 5px;
text-indent: 10px;
}
.m-login-btn {
background-color: #409eff;
color: white;
height: 40px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
&:hover {
cursor: pointer;
background-color: #64a5e7;
}
}
}
}
}
</style>
三、axios拦截器封装
创建一个utils工具文件夹→request.js封装axios拦截器
import axios from 'axios'
const instance = axios.create({
baseURL:'http://10.7.163.142:8089',//服务器根地址
timeout:3000//超时时间
})
/**
* 请求拦截器
*/
instance.interceptors.request.use(
config => {
// 请求拦截处理
console.log('请求拦截处理 >>> ', config)
// config.headers['Author'] = 'my header'
return config
},
error => {
// 请求出错处理
return Promise.reject(error)
}
)
/**
* 响应拦截器
*/
instance.interceptors.response.use(
response => {
// 响应拦截处理
console.log('响应拦截器处理 >>> ', response)
// return response
return response.data
},
error => {
const { response } = error
if (response) {
const status = response.status
switch (status) {
case 404:
console.log('资源不存在 404')
break
case 401:
console.log('Unauthorized 身份验证凭证缺失!')
break
case 403:
console.log('403 Forbidden - 拒绝访问!')
break
case 500:
console.log('服务器出错!')
break
default:
console.log('出现异想不到的错误！')
break
}
}else {
// 说明服务器连结果都没有返回，可能的原因有两种：
/**
* 1. 服务器崩掉了
* 2. 前端客户端断网状态
*/
if (!window.navigator.onLine) {
// 判断为断网，可以跳转到断网页面
console.log('网络不可用,请检查您的网络连接!')
return
} else {
console.log('连接服务端出错!' + error?.message)
return Promise.reject(error)
}
}
return Promise.reject(error)
}
)
export default instance
