使用vue框架的小伙伴对于axios 确定是不陌生的。 网上一搜,介绍一大堆,axios中文文档来自简书这里就再也不讲他的原理阿用法之类了,直接上代码。vue
这里使用npm安装,须要其余安装方法的自行看文档:axios中文文档来自简书
npm install axios --save
ios
import axios from 'axios' // 引入axios import {refresh} from '@/api/user' // 封装好的refresh(鉴权须要刷新)接口 import Vue from 'vue' import Toast from 'muse-ui-toast' // 根据业务选择合适的ui库,我这里使用muse-ui的toast(消息框)组件 Vue.use(Toast) // 建立axios实例 const service = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? '' : process.env.NODE_ENV === 'pre'? '' : 'http://127.0.0.1:8888', timeout: 15000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use(config => { // Do something before request is sent let token = sessionStorage.getItem('access_token') // 个人用户权限token存储再sessionStorage中,可根据业务须要修改代码 if (token) { config.headers['Authorization'] = 'Bearer ' + token // 让请求header携带access_token。可根据业务须要修改代码 } return config }, error => { Toast.message({ close: false, message: '请求异常,请稍后再试~', color:'rgba(0,0,0,.55)' }) }) // respone拦截器,实现鉴权刷新 service.interceptors.response.use( response => response, error => { const config = error.config // 能够试着打印config看看具体是些什么 // 这里我对多数的状态码进行了一个统一整理。 if (error.response.status === 400) { Toast.message({ color:'rgba(0,0,0,.55)', message: error.response.data.err_msg, close: false }) } if (error.response.status === 500) { Toast.message({ close: false, message: '请求异常,请稍后再试~', color:'rgba(0,0,0,.55)' }) } // 重点代码:当服务器返回401状态码时,使用refresh刷新接口更新已有token,再重复上一个接口请求,若失败,退出登陆 if (error.response.status === 401) { if (config.url != config.baseURL + '/refresh') { // 判断上一次请求是不是刷新请求。不判断的话,容易出现一直刷新的bug const retryreq = new Promise((resolve, reject) => { // 必须使用promise,不然不会被返回执行上一布操做 // 使用refresh接口 refresh({refresh_token: sessionStorage.getItem('refresh_token')}).then(res => { let data = res.data.data // 更新token sessionStorage.setItem('refresh_token', data.refresh_token) sessionStorage.setItem('access_token', data.access_token) config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('access_token') config.baseURL = '' resolve(service(config)) // 必须resolve }).catch(error => { console.log(error) }) }) return retryreq; } else { // 若是刷新失败从新登陆 Toast.message({ close: false, message: '登陆失效,请从新登陆', color:'rgba(0,0,0,.55)' }) removeToken() sessionStorage.clear() location.reload() } } return Promise.reject(error); } ) export default service
上面的代码中引入了一个 refresh
import {refresh} from '@/api/user' // 封装好的refresh(鉴权须要刷新)接口
es6
在工做中,与后台交互必不可少,怎样使请求方式看着更加简介好看,须要对请求接口的api进行封装。
在上面的代码中,已经实现了对axios网络请求的封装了。我通常会在src目录下新建一个api文件夹,在里面分别建立请求对应的js文件:
npm
上代码:axios
import request from "@/utils/request"; // 引入已经封装好的js文件,我这里叫request,根据本身须要修改。 export function refresh (data) { return request({ url: '/refresh', // 接口名称 method: 'post', // 接口方法 data: data // 参数 }) }
使用api
import {refresh} from '@/api/user refresh(参数).then(res => { // do something }).catch(err => { // do something })
上代码promise
import request from "@/utils/request"; const user = { refrsh: function (query) { return request({ url: '/refrsh', method: 'get', params: query }) }, .... } export default user
使用服务器
import user from '@/api/user user.refresh(参数).then(res => { // do something }).catch(err => { // do something })
以上代码只是es6的两种导出引入文件的使用,可根据业务的复杂程度选择合适的代码风格。注意引入方式{}的区别。axios的使用就是这个样子的啦~网络