Mint-ui设计移动端系统-Axios

最新推荐文章于 2024-03-26 09:50:40 发布

华科易迅

最新推荐文章于 2024-03-26 09:50:40 发布

阅读量622

点赞数

分类专栏： Mint-ui

本文链接：https://blog.csdn.net/qixiang_chen/article/details/106954434

版权

Mint-ui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Mint-ui开发系统是前端静态系统，其需要与后台系统交互信息完成业务逻辑，通过Http插件Axios实现前后端数据交互。

package.json中引入Axios

在这里插入图片描述

{
  "name": "gf_mob",
  "version": "1.0.0",
  "description": "gf mobile project",
  "author": "qixiang_chen@aliyun.com <qixiang_chen@aliyun.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "js-cookie": "^2.2.1",
    "mint-ui": "^2.2.13",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "axios": "^0.18.1",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "nprogress": "^0.2.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

新建JS文件构建Axios对象

\src\util\ajax.js

/**
 * axios全局配置
 * TODO: 拦截器全局配置，根据实际情况修改
 */
import axios from 'axios'
import router from '../router'
import Auth from '@/util/auth'

var getTokenLock = false,
    CancelToken = axios.CancelToken,
    requestList = []

/**
 * Token校验
 * @param {function} cancel - 中断函数
 * @param {function} callback -  回调
 * @description 校验Token是否过期，如果Token过期则根据配置采用不同方法获取新Token
 *              自动获取Token：过期时自动调用获取Token接口。注意：当有任一请求在获取Token时，其余请求将顺延，直至新Token获取完毕
 *              跳转授权Token：过期时中断当前所有请求并跳转到对应页面获取Token。注意：跳转页面授权最佳实现应在授权页面点击触发
 */
function checkToken(cancel, callback){
    console.log("checkToken..."+new Date()+',Auth.hasToken()='+Auth.hasToken());
    if(!Auth.hasToken()){
        //console.log("checkToken...hasToken")
        // 自动获取Token
        if(Auth.tokenTimeoutMethod == "getNewToken"){
            // 如果当前有请求正在获取Token
            if(getTokenLock){
                setTimeout(function(){
                    checkToken(cancel, callback)
                }, 500)
            } else {
                getTokenLock = true
                store.dispatch("auth/getNewToken").then(() => {
                    console.log("已获取新token")
                    callback()
                    getTokenLock = false
                })
            }
        }
        // 跳转授权Token
        if(Auth.tokenTimeoutMethod == "jumpAuthPage" && Auth.isLogin()){
            if(router.currentRoute.path != '/auth'){
                // BUG: 无法保证一定会中断所有请求
                cancel()
                router.push('/auth')
            }
        }
    } else {
        callback()
    }
}

/**
 * 阻止短时间内的重复请求
 * @param {string} url - 当前请求地址
 * @param {function} c - 中断请求函数
 * @description 每个请求发起前先判断当前请求是否存在于RequestList中，
 *              如果存在则取消该次请求，如果不存在则加入RequestList中，
 *              当请求完成后500ms时，清除RequestList中对应的该请求。
 */

function stopRepeatRequest(url, c){
    for( let i = 0; i < requestList.length; i++){
        if(requestList[i] == url){
            c()
            return
        }
    }
    requestList.push(url)
}


// 超时设置
const service = axios.create({
    // 请求超时时间
    timeout: 3600000,
    //headers: {'Content-Type': 'application/x-www-form-urlencoded'},
});

// baseURL
axios.defaults.baseURL=Auth.getServerUrl();
axios.defaults.withCredentials=true;
//axios.defaults.origin='http://localhost:8080';

// http request 拦截器
// 每次请求都为http头增加Authorization字段，其内容为token
service.interceptors.request.use(
    config => {
        console.log("axios 请求拦截...");
        let cancel
        //config.cancelToken = new CancelToken(function executor(c) {
        //    cancel = c;
        //})

        //如果是退出状态停止检测Token
        //if(!Auth.logoutFlag)
        //{
            //console.log("axios 请求拦截...token="+`${store.state.user.token}`);
            //checkToken(cancel, function(){
            //    Auth.setLoginStatus()
            //    config.headers.Authorization = `${store.state.user.token}`
            //})
        //}
        let token = sessionStorage.getItem('token');
        if (!(token == null || token == 'null' || token == '')) {
          config.headers.Authorization = token;
        }

        let userId = sessionStorage.getItem('userId');
        if (!(userId == null || userId == 'null' || userId == '')) {
          config.headers.userId = userId;
        }

        let d = new Date();
        let timestamp=d.getTime();
        let params=config.params;
        if (!(params == undefined || params == null)){
            params.timestamp=timestamp;
        }else{
            params={};
            params.timestamp=timestamp;
        }
        config.params=params;
        //stopRepeatRequest(config.url, cancel)
        return config
    },
    err => {
        return Promise.reject(err);
    }
);

// http response 拦截器
// 针对响应代码确认跳转到对应页面
service.interceptors.response.use(
    response => {
        console.log("axios 响应拦截...");
        for( let i = 0; i < requestList.length; i++){
            if(requestList[i] == response.config.url){
                // 注意，不能保证500ms必定执行，详情请了解JS的异步机制
                setTimeout(function(){
                    requestList.splice(i,1)
                }, 1000)
                break
            }
        }
        return Promise.resolve(response.data)
    },
    error => {
        console.log("axios 响应拦截 error..."+JSON.stringify(error));
        if(axios.isCancel(error)){
            console.log(error)
            return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断")
        } else if (error.response) {
            if (error.response.status == 401){
               router.push('/error/401');
            }
            else if (error.response.status == 403){
               router.push('/error/403');
            }else{
               //Message({
               //  message: `服务器错误！错误代码：${error.response.status}`,
               //  type: 'error'
               //})
               return Promise.reject(error.response.data)
            }
            
        }
    }
);

export default service;

新建auth.js文件，初始化配置

\src\util\auth.js

import Cookies from 'js-cookie'

const auth = {
    isLogin: function(){
        //return Cookies.get(this.loginKey)
        let ret = false;
        let isLogin = sessionStorage.getItem('isLogin');
        if (isLogin != null && isLogin != ''){
            ret = isLogin;
        }
        return ret;
    },
    getUserId: function() {
        return sessionStorage.getItem('userId');
    },
    getUserName: function() {
        return sessionStorage.getItem('userName');
    },
    isSsoEnv:function(){
        return process.env.IS_SSO;
    },

    getServerUrl:function()
    {
        return process.env.SERVER_URL;
    },

    getSsoUrl:function(){
        return process.env.SSO_URL;
    }
}

export default auth

配置Conf文件

在这里插入图片描述

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER_URL: '"http://localhost:6060"',
  IS_SSO: false,
  SSO_URL: '"http://sso.test.com/oauth2/authorize?client_id=syscode&redirect_uri=http://localhost:8080/%23/sso&response_type=code&state=123"',
})

配置main.js文件，引入axios.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import router from './router'
import App from './App.vue'
import { Tabbar, TabItem } from 'mint-ui';
import axios from './util/ajax'
import utils from './util/utils'
import store from './store'

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
Vue.prototype.$axios = axios;
Vue.prototype.$utils = utils;

Vue.use(MintUI)

new Vue({
  el: '#app',
  router,
  store,
  axios,
  utils,
  render: h => h(App)
}).$mount('#app')

使用Axios与后台交互数据

  data () {
    return {
      username:'',
      email:'',
      password:'',
      phone:'',
      website:'',
      number:'',
      birthday:'',
      introduction:'',
      storeList:[],
    }
  },    
  findStoreNameList() {
      let that = this;
      this.loading = true;
      this.$axios({
        url: "/store/storenamelist",
        method: "get",
        params: {
          userId:'admin',
          page:1,
          size:10,
          name:''
        }
      })
      .then(res => {
        this.loading = false;
        that.storeList = res.list;
      })
      .catch(err => {
        this.loading = false;
        this.$message.error(`获取数据失败，失败码：`+JSON.stringify(err));
      });
    },

华科易迅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mint-ui设计移动端系统-Axios

Mint-ui开发系统是前端静态系统，其需要与后台系统交互信息完成业务逻辑，通过Http插件Axios实现前后端数据交互。package.json中引入Axios{ "name": "gf_mob", "version": "1.0.0", "description": "gf mobile project", "author": "qixiang_chen@aliyun.com <qixiang_chen@aliyun.com>", "private": true,
复制链接

扫一扫

专栏目录