程序设计实验室
微信公众号
安装axios
axios是一个基于Promise用于浏览器和Node.js的HTTP客户端，我们后续需要用来发送HTTP请求，先来记录一下axios的安装和使用。
安装命令
yarn add axios
写代码
修改一下src/views/Home.vue
首先布局改一下，添加一个按钮用来触发网络请求逻辑
<template>
<div class="page">
<h2>Home Page</h2>
<el-alert
title="主页"
type="success">
</el-alert>
<el-button type="primary" @click="testAxios()">测试axios</el-button>
</div>
</template>
然后是下面的脚本
import axios from 'axios'
export default {
name: "Home",
methods: {
testAxios() {
axios.get('http://localhost:5038/Api/Category/1')
.then(res => console.log(res.data))
}
}
}
打开页面测试一下
打开页面，点击按钮
可以看到console已经打印出来请求到的数据了，nice
封装axios
使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护，所以我们在这里先对axios进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。
要求
- 统一url配置。
- 统一api请求。
- request（请求）拦截器。例如：带上token等，设置请求头。
- response（响应）拦截器。例如：统一错误处理，页面重定向等。
- 根据需要，结合vuex做全局的loading动画，或者错误处理。
- 将axios封装成Vue插件使用。
目录结构
在src目录下，新建一个http文件夹，用来存放http交互api代码。文件结构如下
http
├── modules // 用户管理、博客管理等子模块API。
│ ├── blog.js
│ ├── category.js
│ ├── login.js
│ ├── photo.js
│ └── user.js
├── api.js // 请求接口汇总模块，聚合所有模块API。
├── axios.js // 二次封装axios模块，包含拦截器等信息。
├── config.js // axios默认配置，包含基础路径等信息。
└── index.js // 将axios封装成插件，按插件方式引入。
安装js-cookie
在我们封装的axios模块里，会用到Cookie获取token，所以需要把相关依赖安装一下。执行以下命令
yarn add js-cookie
继续写代码
/src/utils/global.js
我们把一些全局的配置、常量和方法放置在此文件中。
/**
* 全局常量、方法封装模块
* 通过原型挂载到Vue属性
* 通过 this.Global 调用
*/
// 后台管理系统服务器地址
export const baseUrl = 'http://localhost:5038'
export default {
baseUrl
}
config.js
AXIOS相关配置，每个配置项都有带说明，详见注释。
import {baseUrl} from '@/utils/global'
export default {
method: 'get',
// 基础url前缀
baseUrl: `${baseUrl}/Api`,
// 请求头信息
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
// 参数
data: {},
// 设置超时时间
timeout: 10000,
// 携带凭证
withCredentials: true,
// 返回数据类型
responseType: 'json'
}
axios.js
axios拦截器，可以进行请求拦截和响应拦截，在发送请求和响应请求时执行一些操作。
- 这里导入类配置文件的信息（如baseURL、headers、 withCredentials等设置）到axios对象。
- 发送请求的时候获取token，如果token不存在，说明未登录，就重定向到系统登录界面，否则携带token继续发送请求。
- 如果有需要，可以在这里通过response响应拦截器对返回结果进行统一处理后再返回。
代码如下
import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request 请求拦截器
instance.interceptors.request.use(
config => {
let token = Cookies.get('token')
// 发送请求时携带token
if (token) {
config.headers.token = token
} else {
// 重定向到登录页面
router.push('/login')
}
return config
},
error => {
// 请求发生错误时
console.log('request:', error)
// 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
}
// 需要重定向到错误页面
const errorInfo = error.response
console.log(errorInfo)
if (errorInfo) {
error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
}
)
// response 响应拦截器
instance.interceptors.response.use(
response => {
return response.data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权，请登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = `请求地址出错: ${err.response.config.url}`
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器内部错误'
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
console.error(err)
return Promise.reject(err) // 返回接口返回的错误信息
}
)
// 请求处理
instance(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}
index.js
这里把axios注册为Vue插件使用，并将api模块挂载在Vue原型的$api对象上。这样在能获取this引用的地方就可以通过 this.$api.子模块.方法 的方式调用API了。
代码如下：
// 导入所有接口
import api from './api'
const install = Vue => {
if (install.installed)
return;
install.installed = true;
Object.defineProperties(Vue.prototype, {
// 注意，此处挂载在 Vue 原型的 $api 对象上
$api: {
get() {
return api
}
}
})
}
export default install
api.js
此模块是一个聚合模块，汇合modules目录下的所有子模块API。
// 接口统一集成模块
import * as blog from './modules/blog'
import * as category from './modules/category'
import * as login from './modules/login'
import * as photo from './modules/photo'
import * as user from './modules/user'
// 默认全部导出
export default {blog, category, login, photo, user}
modules/blog.js
modules目录下的子模块太多，不方便全贴，这里就以博客管理模块为例。
import axios from '../axios'
// 获取博客列表
export const getList = (categoryId, page, pageSize) => {
return axios({
url: 'BlogPost',
method: 'get',
data: {categoryId, page, pageSize}
})
}
// 获取指定博客文章
export const get = postId => {
return axios({
url: `BlogPost/${postId}/`,
method: 'get',
})
}
/src/main.js
修改main.js，导入API模块，并通过Vue.use(api)语句进行使用注册，这样就可以通过this.$api.子模块.方法的方式来调用后台接口了。
引入global模块，并通过Vue.prototype.global = global语句进行挂载，这样就可以通过this.gloabl.xx来获取全局配置了。
import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import global from '@/utils/global';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 引入Element
Vue.use(ElementUI)
// 引入API模块
Vue.use(api)
// 挂载全局配置模块
Vue.prototype.global = global
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
完成
OK，到这里axios封装就好了，这里就不测试了~~（懒）~~
到这里准备工作基本OK，接下来要开始写页面了