vue中axios请求的封装

时间 2019-11-08

标签 vue axios 请求封装栏目软件设计繁體版

原文原文链接

axios

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了之后维护方便，另外一方面也能够对请求进行自定义处理前端

安装

npm i axiosvue

封装

我把axios请求封装在http.js中，从新把get请求，post请求封装了一次node

首先，引入axiosios

import axios from 'axios'
复制代码

设置接口请求前缀

通常咱们开发都会有开发、测试、生产环境，前缀须要加以区分，咱们利用node环境变量来做判断，npm

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
复制代码

在localhost调试时，直接用开发地址通常都会有跨域的问题，因此咱们还须要配置代理编程

本项目是vue cli3搭建的，代理配置是在vue.config.js文件中:axios

module.exports = {
  devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }
}
复制代码

这样就成功把/proxyApi 指向了 'http://dev.xxx.com'，重启服务api

修改一下http.js中的配置跨域

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}
复制代码

拦截器

接着设置超时时间和请求头信息promise

axios.defaults.timeout = 10000
// 请求头信息是为post请求设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
复制代码

axios很好用，其中之一就是它的拦截器十分强大，咱们就能够为请求和响应设置拦截器，好比请求拦截器能够在每一个请求里加上token，作了统一处理后维护起来也方便，响应拦截器能够在接收到响应后先作一层操做，如根据状态码判断登陆状态、受权。

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求以前判断是否存在token
    // 若是存在，则统一在http请求的header都加上token，这样后台根据token判断你的登陆状况，此处token通常是用户完成登陆后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })
// 响应拦截器
axios.interceptors.response.use(response => {
  // 若是返回的状态码为200，说明接口请求成功，能够正常拿到数据
  // 不然的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未受权调取受权接口
    } else if (response.data.code === 510) {
      // 未登陆跳转登陆页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 咱们能够在这里对异常状态做统一处理
  if (error.response.status) {
    // 处理请求失败的状况
    // 对不一样返回码对相应处理
    return Promise.reject(error.response)
  }
})

复制代码

get post的封装

httpGet: 一个参数是请求的url,一个就携带的请求参数，返回promise对象

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

复制代码

httpPost: 原理和get差很少，须要注意，这里多了个data参数，post请求提交前须要对它进行序列号操做，这里是经过transformRequest作处理；另外两个参数url,params和get请求的同样；

// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
复制代码

如何使用

我把全部的接口调用都在api.js文件中

先引入封装好的方法，再在要调用的接口从新封装成一个方法暴露出去

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

复制代码

在页面中能够这样调用：

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})
复制代码

这样能够把api统一管理起来，之后维护修改只须要在api.js文件操做便可。

完整代码

最后贴上完整代码

// http.js
import axios from 'axios'

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

// 请求拦截器
axios.interceptors.request.use(
  config => {
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

axios.defaults.timeout = 10000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 响应拦截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未受权调取受权接口
    } else if (response.data.code === 510) {
      // 未登陆跳转登陆页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 咱们能够在这里对异常状态做统一处理
  if (error.response.status) {
    // 处理请求失败的状况
    // 对不一样返回码对相应处理
    return Promise.reject(error.response)
  }
})

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}
复制代码

// api.js
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

export const save = (data) => {
  return httpPost({
    url: 'apps/wechat/api/save_member',
    data
  })
}
复制代码

// .vue
<script>
import { getorglist } from '@/assets/js/api'
export default {
  name: 'upload-card',
  data() {},
  mounted() {
    getorglist({ id: 200 }).then(res => {
      // console.log(res)
    })
  },
}
</script>
复制代码

=========================================================

3月25日更新

先谢谢帮我说话的小伙伴，没想到这篇居然有这么多阅读量，原来只是随手笔记，觉得没什么人看，周末一看有100多条消息，有点惊到了

针对评论区的提出意见，文章已经作了更新修正

评论区疑问是为何还要多封装一层promise,不直接返回axios。我在这里统一作个说明：

固然能够直接返回axios.get().then(res=>res.data),写法更简洁些；我的编程习惯，感受resolve(res.data)写法更优雅些,这个就见仁见智了，因此正文对这点先作保留。这篇笔记也是提供一个思路，仅供参考。小伙伴能够根据本身实际业务需求来选择。

本人前端小白一枚此次也是想记录一下axios的使用，有什么不足之处欢迎各位提意见哈（尽可能温柔点），之后也会根据实际业务需求和你们的意见来作调整和修正（持续更新~)