简单封装axios api

可以在代码逻辑中写axios请求，处理请求结果，但是随着项目越来越大，代码会很繁琐，不容易维护，所以，可以把一些在所有请求中都要处理的逻辑抽取出来，封装成api方法。比如每次请求中都要判断是否有权限，每次请求都要携带token。

建一个request.js文件，对请求的服务的拦截

import axios from 'axios'

// create an axios instance,根据需要写入配置信息
const service = axios.create({
    // baseURL: process.env.BASE_API, // api的base_url
    // timeout: 5000,
    //headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },//method: 'get', //一般需要用post
    // request timeout
})

// request interceptor  请求之前的拦截器
service.interceptors.request.use(config => {
    // Do something before request is sent
    return config
}, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
})

// respone interceptor 请求之后异常状态拦截
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.statusCode === 201 || res.statusCode === 400 || res.statusCode === 401 || res.statusCode === 403 || res.statusCode === 404) {
            return Promise.reject('error');
        } else {
            return response.data;
        }
    },
    error => {
        console.log('err' + error)// for debug
        return Promise.reject(error)
    }
)

export default service

添加auth.js文件，本地缓存实现对用户信息缓存的读写和移除，代码：

//与用户验证相关的方法

export function getToken() {
    //从localstorage获取token
    return localStorage.getItem('token');
}

export function setToken(token) {
    //本地缓存存储token
    localStorage.setItem('token', token);
}

export function removeToken() {
    //本地缓存移除token
    localStorage.removeItem('token');
}

export function getUserId() {
    //从本地缓存中获取userID
    return localStorage.getItem("userid");
}

export function setUserId(userid) {
    //本地缓存存储userId
    localStorage.setItem('userid', userid);
}

export function removeUserId() {
    //本地缓存移除userId
    localStorage.removeItem('userid');
}

export function getProjectId() {
    //从本地缓存中获取projectid
    return localStorage.getItem("projectid");
}

export function setProjectId(projectid) {
    //本地缓存存储projectid
    localStorage.setItem('projectid', projectid);
}

export function removeProjectId() {
    //本地缓存移除projectid
    localStorage.removeItem('projectid');
}

在store.js中，添加如下对auth.js的使用，和状态管理：

import Vue from 'vue'
import Vuex from 'vuex'
import { getToken, setToken, removeToken, getUserId, setUserId, getProjectId, setProjectId, removeUserId, removeProjectId } from '../Utils/auth.js'

Vue.use(Vuex);

/*访问状态对象--存放变量*/
const state = {
    token: getToken(),
    userId: getUserId(),
    projectId: getProjectId()
}
/*访问触发对象--存放事件*/
const mutations = {
    SET_TOKEN: (state, token) => {
        setToken(token);
        //state.token = token;
        //localStorage.setItem('token', token);
    },
    SET_USER_ID: (state, m) => {
        setUserId(m);
    },
    SET_PRO_ID: (state, m) => {
        state.projectId = m;
        setProjectId(m);
    },

    //用户注销后删除所有本地数据
    LOGOUT: (state) => {
        removeToken();
        removeUserId();
        removeProjectId();
    }
}
export default new Vuex.Store({
    state,
    mutations
})

添加webapi.js：使用request.j实现对请求的拦截，封装测试前端api,传递参数，发送请求：

import request from './request'  //引入request.js实现对请求前后的拦截功能
export function getTest(apiRoute) {
    return request({
        url: apiRoute,
        method: 'get',
        params: { "ai": "ai" }
    })
}

webApi在组件中的使用

//按需引入封装好的webapi的方法

import { getTest } from "../../Utils/webapi.js";

export default{
//测试前端api的使用，在创建的时候发送请求，获取项目信息
  created: function() {
    var _this = this;
    //test
    getTest("/project/test").then(response => {
      _this.testapi = response.data;
    });
  },
}

该例子是针对项目的简单封装和使用例子，具体的axios的配置和相关知识可以看下一遍文章介绍

猜你喜欢