axios
首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js是http客户端。
axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
特点:支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器支持防止CSRF(跨站请求伪造)
这里你一定会想promise是什么东西,以下是promise的个人理解:
promise是什么:是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。
promise的作用:Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。
现在封装一个axios.js文件,这个axios在headers里面是没有传递数据的,是一个相对而言比较简单的封装。
在这个axios.js中,我引入了element ui 的部分组件,目的是为了接口连接不上时,弹窗弹出相对应的信息。
代码如下:
/* eslint-disable no-undef */ import axios from 'axios' import { Message } from 'element-ui' /* 统一请求路径前缀,在npm run dev的时候, 这个前缀要与vue.config.js里面的devServer的proxy相对应 */ // const base = '/ccma-server/api' // 服务器地址 // const base = '/api' //本地 // 超时设定 axios.defaults.timeout = 15000 /* 添加请求拦截器 */ axios.interceptors.request.use(config => { /* 发送请求之前做些什么 */ // console.log(config) return config }, err => { Message.error('请求超时') return Promise.reject(err) //.catch的时候可以捕捉到错误 }) /* 添加响应拦截器 */ axios.interceptors.response.use(response => { /* 对数据做些什么 */ const data = response.data // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case 401: break case 404: // 没有权限 if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误') } break case 403: // 没有权限 if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误') } break case 500: // 错误 if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误') } break default: return data } return data }, (err) => { /* 对响应错误做些什么 */ // 返回状态码不为200时候的错误处理 Message.error(err.toString()) return Promise.reject(err) //.catch的时候可以捕捉到错误 }) export const getRequest = (url, params) => { return axios({ method: 'get', url: `${base}${url}`, params: params, headers: { // accessToken: } }) } export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'application/json' // accessToken: } }) } export const putRequest = (url, params) => { return axios({ method: 'put', url: `${base}${url}`, data: params, transformRequest: [ function (data) { let ret = '' for (const it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret } ], headers: { 'Content-Type': 'application/json' // accessToken: } }) } export const deleteRequest = (url, params) => { return axios({ method: 'delete', url: `${base}${url}`, params: params, headers: { // accessToken: } }) } export const importRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { // accessToken: } }) } export const uploadFileRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, params: params, headers: { // accessToken: } }) }
代码里面的注释我觉得已经很详细了,如果还有不明白的地方可以留言讨论。
第二种封装(在headers里面带token的)
一般来说,编写后台管理系统的话,一般会涉及到权限管理,调接口的话,会在headers里面传递一个唯一的token来判断用户的权限,如果要在每一个接口都传一个token的话,这样会非常的麻烦和繁琐。所以我就在axios里面直接封装好了,这里的token我是用的localStorage来传递的,你也可以根据业务来传递(cookie或者session)个人建议可以根据你的实际业务进行更改。代码如下:
import axios from 'axios' import { getStore, setStore } from './storage' import { router } from '../router/index' import { Message } from 'element-ui' import Cookies from 'js-cookie' // 统一请求路径前缀 // const base = '/ccma-server/api' // 服务器地址/ const base = '/api' // 本地/// // 超时设定 axios.defaults.timeout = 15000 axios.interceptors.request.use(config => { return config }, err => { Message.error('请求超时') return Promise.reject(err) }) // http response 拦截器 axios.interceptors.response.use(response => { const data = response.data // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case 401: // 未登录 清除已登录状态 Cookies.set('userInfo', '') setStore('accessToken', '') if (router.history.current.name !== 'login') { if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误,请重新登录') } router.push('/login') } break case 403: // 没有权限 if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误') } break case 500: // 错误 if (data.msg !== null) { Message.error(data.msg) } else { Message.error('未知错误') } break default: return data } return data }, (err) => { // 返回状态码不为200时候的错误处理 Message.error(err.toString()) return Promise.resolve(err) }) export const getRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'get', url: `${base}${url}`, params: params, headers: { 'accessToken': accessToken } }) } export const postRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'application/json', 'accessToken': accessToken } }) } export const putRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'put', url: `${base}${url}`, data: params, transformRequest: [function (data) { let ret = '' for (const it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/json', 'accessToken': accessToken } }) } export const deleteRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'delete', url: `${base}${url}`, params: params, headers: { 'accessToken': accessToken } }) } export const importRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'accessToken': accessToken } }) } export const uploadFileRequest = (url, params) => { const accessToken = getStore('accessToken') return axios({ method: 'post', url: `${base}${url}`, params: params, headers: { 'accessToken': accessToken } }) }
封装完成之后要怎么使用呢,本人是这样子操作的,首先创建一个js放需要调的接口,这里建议按模块的划分,方便管理,具体代码例子如下:
import { getRequest, postRequest } from '@/libs/axios' export const getAllDrugInfo = (params) => { return postRequest('/clinicalMedFirst/getAllDrugInfo', params) }
然后在你需要的地方引入一下,比如说我刚刚创建的那个js文件叫lcyy.js
import { getAllDrugInfo } from '@/api/lcyy' //在methods里面 getAllDrugInfo () { getAllDrugInfo({ drugName: '' // 需要传递的参数 }).then(res => { if (res.code === 200) { //处理你要的数据 console.log(res.data) }) } }) }
好了,这样的就可以使用了