美文网首页
a x i o s 的 封 装

a x i o s 的 封 装

作者: 与你何干_1bc9 | 来源:发表于2019-08-01 18:26 被阅读0次

    对 a x i o s 做 一 个 简 单 的 封 装 :D ( 以 前 前 辈 教 我 的 )

    request.js

    import axios from "axios";
    import {backendPath, uploadPath} from "../project-config/base";
    //import { Message, MessageBox } from 'element-ui'
    // import store from '../store'
    
    const service = axios.create({
      baseURL: 'http://0.0.0.0:8080', // api 的 base_url
      timeout: 5000 // 请求超时时间
    })
    
    // request拦截器
    // service.interceptors.request.use(
    //   config => {
    //     if (store.getters.token) {
    //       config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    //     }
    //     return config
    //   },
    //   error => {
    //     // Do something with request error
    //     console.log(error) // for debug
    //     Promise.reject(error)
    //   }
    // )
    
    // response 拦截器
    // service.interceptors.response.use(
    //   response => {
    //
    //     /**
    //      * code为非200是抛错 可结合自己业务进行修改
    //      */
    //     const res = response.data
    //
    //     if (res.code !== '200') {
    //       Message({
    //         message: res.msg,
    //         type: 'error',
    //         duration: 5 * 1000
    //       })
    //       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
    //       if (res.code === '50008' || res.code === '50012' || res.code === '50014') {
    //         MessageBox.confirm(
    //           '你已被登出,可以取消继续留在该页面,或者重新登录',
    //           '确定登出',
    //           {
    //             confirmButtonText: '重新登录',
    //             cancelButtonText: '取消',
    //             type: 'warning'
    //           }
    //         ).then(() => {
    //             sessionStorage.removeItem('token')
    //             window.location.href=`http://120.27.16.130`
    //         })
    //       }
    //       return response;
    //     } else {
    //       return response
    //     }
    //   },
    //   error => {
    //     console.log('err' + error) // for debug
    //     Message({
    //       message: error.msg,
    //       type: 'error',
    //       duration: 5 * 1000
    //     })
    //     return Promise.reject(error)
    //   }
    // )
    
    
    /***
     * 上传文件地址固定
     * @param formData
     * @returns {Promise<*>}
     */
    async function requestByUpload(formData) {
      const res = await service.post(`${backendPath}/${uploadPath}`, formData, {
        headers: {
          ...defaultHeaders(),
          'Content-Type': 'multipart/form-data'
        }
      });
      return res.data;
    }
    
    
    //默认请求头
    const defaultHeaders = () => {
      const token = sessionStorage.getItem("token");
      return {
        token,
      }
    };
    /***
     * get请求
     * @param url
     * @param params
     * @returns {Promise<*>}
     */
    async function requestByGet(url, params) {
      if (!url) return;
      const res = await service.get(`${backendPath}/${url}`, {
        params, headers: {
          ...defaultHeaders()
        }
      });
      return res.data;
    }
    
    
    /***
     * post请求
     * @param url
     * @param data
     * @returns {Promise<*>}
     */
    async function requestByPost(url, params) {
      if (!url) return;
      const res = await service.post(`${backendPath}/${url}`, params, {
        headers: {
          ...defaultHeaders()
        }
      });
      return res.data;
    }
    
    export {
      requestByGet, requestByPost, requestByUpload, service
    }
    
    
    

    使 用 方 法 :

    import {requestByGet, requestByPost} from "../../utils/request";
    
     //get
        async functionName({commit}, params) {
          const {data} = await requestByGet("接口路径", params);
          commit("SET_TABLE_DATA", data)
        },
        //post
        async functionName({commit}, params) {
          return await requestByPost("接口路径", params);
        }, 
    

    有 什 么 问 题 可 以 在 评 论 区 沟 通。

    喜 欢 吗 ?还 不 赶 快 给 老 子 点 赞 。

    相关文章

      网友评论

          本文标题:a x i o s 的 封 装

          本文链接:https://www.haomeiwen.com/subject/ybbcdctx.html