Axios(自定义配置新建一个 axios 实例并且封装起来)
自定义配置新建一个 axios 实例
- 先在src里面的某个文件夹里面创建一个.js文件(我的放在了http.js里面)
- http.js里面的核心源码(红色部分):
import axios from 'axios'; import Qs from 'qs' import router from '../router/index' const service = axios.create({//这个service是自定义(你自己起的名字) baseURL: 'http://xxxx.xxxxxxxxx.com/',//请求的公共地址 timeout: 5000, // 请求超时时间 // headers: {'X-Custom-Header': 'foobar'} }); service.interceptors.request.use(function (config) { // 在发送请求之前做些什么 console.log(123); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); //http response 拦截器 //简单点说就是每次得到数据前都要经过这里 service.interceptors.response.use( response => { const res = response.data; console.log(res); if (res.ret === 0) {//请求失败后台给的协议ret等于0 if (res.errcode == 101) {//101 router.push({ path: '/login' }) } else { alert(res.msg); return res; } } else { return res; } }, error => { // TODO 弹窗处理 alert(error.message); return Promise.reject(error) } ) //封装put、get、post、delete、patch export function requestStringify(method, params = {}, beToken = true) { let token, session_id; if (beToken) { let tokenData = getToken(); if (tokenData) { let res = JSON.parse(tokenData); token = res.token//获取到token session_id = res.session_id//获取到session_id } } switch (method) { case 'get': return {token, session_id, ...params}; case 'put': case 'delete': case 'post': case 'patch': if (beToken) { return Qs.stringify({token, session_id, ...params}) } else { return Qs.stringify({...params}) } } } const TokenKey = 'H5-Token'; //对token进行处理 export function getToken() {//获取TokenKey值 return window.localStorage.getItem(TokenKey) } export function setToken(tokenData) {//设置TokenKey值 return localStorage.setItem(TokenKey, JSON.stringify(tokenData)) } export function removeToken() {// return window.localStorage.removeItem(TokenKey) } export default service //导出去
关联到index.vue页面来
核心源码:
<template> <div class="home-main"> ...... <ul> <li v-for="item in list"> <a class="list-item-wrapper"> <div class="list-item"> <span class="list-time">[{{item.created_at}}]</span> <span class="list-text">{{item.quantify_name}}</span> <div class="list-count"><span style=" float: right;">{{item.count}}</span></div> </div> </a> </li> </ul> ...... </div> </template> <script> import axios from 'axios' import qs from 'qs' import request from '../api/http.js' import {requestStringify} from '../api/http.js' export default { name: 'index', components: { mHeader, sheet, mTabbar, mTabbarItem }, data() { return { list: [], RadarData: null, max: 0, avg: 0, total: 0, values: [0, 0, 0, 0, 0, 0], relation_type: 1, season_type: 1, limit: 2, } }, mounted() { request({ method: 'post', url: 'v1/statistic/info-stu.json', data: requestStringify('post', { relation_type: this.relation_type, season_type: this.season_type, page: 1, limit: this.limit,//指定获取的数据条数,目前是假数据,数据怎么改也没有效果 }) }).then(res => { this.list = res.data; }) }, methods: { } } </script> <style lang="less"> </style>