• 在vue中封装axios,可在headers里面带token


    axios
    首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js是http客户端。

    axios的作用是什么呢:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

    特点:支持浏览器和node.js

    支持promise

    能拦截请求和响应

    能转换请求和响应数据

    能取消请求

    自动转换JSON数据

    浏览器支持防止CSRF(跨站请求伪造)

    这里你一定会想promise是什么东西,以下是promise的个人理解:

    promise是什么:是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。

    promise的作用:Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。

    现在封装一个axios.js文件,这个axios在headers里面是没有传递数据的,是一个相对而言比较简单的封装。
    在这个axios.js中,我引入了element ui 的部分组件,目的是为了接口连接不上时,弹窗弹出相对应的信息。
    代码如下:

    /* eslint-disable no-undef */
    
    import axios from 'axios'
    import { Message } from 'element-ui'
    
    /*  统一请求路径前缀,在npm run dev的时候,
        这个前缀要与vue.config.js里面的devServer的proxy相对应
    */
    
    //  const base = '/ccma-server/api'   // 服务器地址
    //  const base = '/api'    //本地
    
    // 超时设定
    axios.defaults.timeout = 15000
    
    /* 添加请求拦截器 */
    axios.interceptors.request.use(config => {
      /* 发送请求之前做些什么 */
      // console.log(config)
      return config
    }, err => {
      Message.error('请求超时')
      return Promise.reject(err) //.catch的时候可以捕捉到错误
    })
    
    /* 添加响应拦截器 */
    axios.interceptors.response.use(response => {
      /* 对数据做些什么 */
      const data = response.data
    
      // 根据返回的code值来做不同的处理(和后端约定)
      switch (data.code) {
        case 401:
          break
        case 404:
          // 没有权限
          if (data.msg !== null) {
            Message.error(data.msg)
          } else {
            Message.error('未知错误')
          }
          break
        case 403:
          // 没有权限
          if (data.msg !== null) {
            Message.error(data.msg)
          } else {
            Message.error('未知错误')
          }
          break
        case 500:
          // 错误
          if (data.msg !== null) {
            Message.error(data.msg)
          } else {
            Message.error('未知错误')
          }
          break
        default:
          return data
      }
    
      return data
    }, (err) => {
      /* 对响应错误做些什么 */
      // 返回状态码不为200时候的错误处理
      Message.error(err.toString())
      return Promise.reject(err)  //.catch的时候可以捕捉到错误
    })
    
    export const getRequest = (url, params) => {
      return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
          // accessToken:
        }
      })
    }
    
    export const postRequest = (url, params) => {
      return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
          'Content-Type': 'application/json'
          // accessToken:
        }
      })
    }
    
    export const putRequest = (url, params) => {
      return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        transformRequest: [
          function (data) {
            let ret = ''
            for (const it in data) {
              ret +=
                encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
          }
        ],
        headers: {
          'Content-Type': 'application/json'
          // accessToken:
        }
      })
    }
    
    export const deleteRequest = (url, params) => {
      return axios({
        method: 'delete',
        url: `${base}${url}`,
        params: params,
        headers: {
          // accessToken:
        }
      })
    }
    
    export const importRequest = (url, params) => {
      return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
          // accessToken:
        }
      })
    }
    
    export const uploadFileRequest = (url, params) => {
      return axios({
        method: 'post',
        url: `${base}${url}`,
        params: params,
        headers: {
          // accessToken:
        }
      })
    }

    代码里面的注释我觉得已经很详细了,如果还有不明白的地方可以留言讨论。

    第二种封装(在headers里面带token的)
    一般来说,编写后台管理系统的话,一般会涉及到权限管理,调接口的话,会在headers里面传递一个唯一的token来判断用户的权限,如果要在每一个接口都传一个token的话,这样会非常的麻烦和繁琐。所以我就在axios里面直接封装好了,这里的token我是用的localStorage来传递的,你也可以根据业务来传递(cookie或者session)个人建议可以根据你的实际业务进行更改。代码如下:

    import axios from 'axios'
    import { getStore, setStore } from './storage'
    import { router } from '../router/index'
    import { Message } from 'element-ui'
    import Cookies from 'js-cookie'
    // 统一请求路径前缀
    // const base = '/ccma-server/api'   // 服务器地址/
    const base = '/api'   // 本地///
    // 超时设定
    axios.defaults.timeout = 15000
    
    axios.interceptors.request.use(config => {
      return config
    }, err => {
      Message.error('请求超时')
      return Promise.reject(err)
    })
    
    // http response 拦截器
    axios.interceptors.response.use(response => {
      const data = response.data
    
      // 根据返回的code值来做不同的处理(和后端约定)
      switch (data.code) {
        case 401:
          // 未登录 清除已登录状态
          Cookies.set('userInfo', '')
          setStore('accessToken', '')
          if (router.history.current.name !== 'login') {
            if (data.msg !== null) {
              Message.error(data.msg)
            } else {
              Message.error('未知错误,请重新登录')
            }
            router.push('/login')
          }
          break
        case 403:
          // 没有权限
          if (data.msg !== null) {
            Message.error(data.msg)
          } else {
            Message.error('未知错误')
          }
          break
        case 500:
          // 错误
          if (data.msg !== null) {
            Message.error(data.msg)
          } else {
            Message.error('未知错误')
          }
          break
        default:
          return data
      }
    
      return data
    }, (err) => {
      // 返回状态码不为200时候的错误处理
      Message.error(err.toString())
      return Promise.resolve(err)
    })
    
    export const getRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'get',
        url: `${base}${url}`,
        params: params,
        headers: {
          'accessToken': accessToken
        }
      })
    }
    
    export const postRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
          'Content-Type': 'application/json',
          'accessToken': accessToken
        }
      })
    }
    
    export const putRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
          let ret = ''
          for (const it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret
        }],
        headers: {
          'Content-Type': 'application/json',
          'accessToken': accessToken
        }
      })
    }
    
    export const deleteRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'delete',
        url: `${base}${url}`,
        params: params,
        headers: {
          'accessToken': accessToken
        }
      })
    }
    
    export const importRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
          'accessToken': accessToken
        }
      })
    }
    
    export const uploadFileRequest = (url, params) => {
      const accessToken = getStore('accessToken')
      return axios({
        method: 'post',
        url: `${base}${url}`,
        params: params,
        headers: {
          'accessToken': accessToken
        }
      })
    }

    封装完成之后要怎么使用呢,本人是这样子操作的,首先创建一个js放需要调的接口,这里建议按模块的划分,方便管理,具体代码例子如下:

    import { getRequest, postRequest } from '@/libs/axios'
    
    export const getAllDrugInfo = (params) => {
      return postRequest('/clinicalMedFirst/getAllDrugInfo', params)
    }

    然后在你需要的地方引入一下,比如说我刚刚创建的那个js文件叫lcyy.js

    import { getAllDrugInfo } from '@/api/lcyy'
    //在methods里面
       getAllDrugInfo () {
          getAllDrugInfo({
            drugName: ''  // 需要传递的参数
          }).then(res => {
            if (res.code === 200) {
                //处理你要的数据
                console.log(res.data)
              })
            }
          })
        }

    好了,这样的就可以使用了

  • 相关阅读:
    自动化:Appium运行成功,取得一个小的胜利
    调优案例1
    HTTP请求方式中8种请求方法(简单介绍)
    Java中基本类型和引用类型(简单介绍)
    @WebListener 注解方式实现监听(eclipse和idea)
    Git免密码提交
    在idea配置jetty和创建(包、文件)javaWeb以及Servlet简单实现
    emmet工具使用和技巧
    Markdown基本语法总结
    viewport原理和使用和设置移动端自适应的方法(移动适应电脑)
  • 原文地址:https://www.cnblogs.com/wanglaowu/p/14480429.html
Copyright © 2020-2023  润新知