Vue前端开发——数据交互axios

Axios 是⼀个基于 promise 的 HTTP 库，可以⽤在浏览器和 node.js 中说明： 本⽂介绍Vue 开发中对axios 的封装处理，不对axios 概念详细介绍项⽬api基本结构

api ⽬录结构

安装

npm install axios --save

当然了使⽤yarn 或者 bower都可以了，看⾃⼰⽤的什么包管理器就⽤什么安装，也可以直接⽤cdn

封装请求

⼀般我们封装可以划分为以下三步1. 请求拦截2. 数据相应3. 异常处理创建 service.js ⽂件创建服务

import axios from 'axios';const service = axios.create();

异常提⽰及错误处理

// 记录和显⽰错误const TipLog = msg => { Message({ message: msg, type: 'warning', showClose: true });};const errorHandle = (status, msg) => { switch (status) { case 'exceeded': TipLog(msg); break; case 400: TipLog(`请求出错: ${msg}`); break; casecase 500: TipLog(`服务器内部错误:${msg}`); break; case 501: TipLog('服务未实现'); break; case 502: TipLog('⽹关错误'); break; case 503: TipLog('服务不可⽤'); break; default: TipLog(msg); break; }};

请求拦截(如在请求前给headers中添加token）

service.interceptors.request.use( request => { const token = utils.cookies.get('token'); const isToken = (request.headers || {}).isToken === false if (token && !isToken) { request.headers['token'] = 'Bearer ' + token// token } return request })

响应处理 （⾸先判断http 请求是否成功，然后判断业务接⼝处理数据返回是否正常)

service.interceptors.response.use( async response => { const { status, data } = response if (status === 200) { // 这⼉业务接⼝处理成功数据状态码和后端讨论统⼀ if (data.code === 0) { return data.data; } else { errorTipLog(data.msg) return Promise.reject(data.m理，⼀般建议重新请求⼀次，根据系统架构确定 var originalRequest = error.config; return axios.request(originalRequest); // errorHandle('exceeded', '请求超时'); } else { console.log(response, 'response') errorHandle(response.status, response.data.msg);

加载api

使⽤require.context ⼯程⾃动化导⼊所有的接⼝模块

import { request } from './service'const files = require.context('./modules', false, /\\.js$/)const apiGenerators = files.keys().map(key => files(key).default)let api = {}apiGenerators.forEach(generator => { const apiInstance = generator({ request }) for

挂载api 到原型链上

main.js 中 import api from '@/api';Vue.prototype.$api = api;

api 模块写法

具体参数传递处理是指定字段还是统⼀json ，看项⽬架构了

// 接⼝apiexport default ({ request }) => ({ // get ⽅法 app_list(query = {}) { return request({ url: '/url', method: 'get', params: query, }); }, // 删除delete app_del(query = {}) { return request({ url: '/url', method: 'delete', data: query, }); },

调⽤请求

页⾯中就可以直接这样调⽤了，不⽤导⼊指定模块

this.$api.app_list().then(res=> {console.log(res)})

⼀般建议接⼝⽂件名称和页⾯模块相对应，这样找的时候可以很快找到，基础代码都在上⾯了，实际业务开发中还会进⾏扩展及处理，如批量请求等本⽂没有做封装处理，当然有些业务也不⼀定需要封装请求，具体根