在vue中封装axios

axios

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。
axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
特点：支持浏览器和node.js

        支持promise

        能拦截请求和响应

        能转换请求和响应数据

        能取消请求

        自动转换JSON数据

         浏览器支持防止CSRF（跨站请求伪造）

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

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

promise的作用：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文件

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

文章转载于https://blog.csdn.net/qq_42268364/article/details/97402499

在vue中封装axios

axios

第二种封装（在headers里面带token的）

你可能感兴趣的:(在vue中封装axios)