封装axios及简单应用举例-Toy模板网

这篇具有很好参考价值的文章主要介绍了封装axios及简单应用举例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步：具体封装工具：

在项目根目录下创建utils目录，然后在其中创建文件http.js：

// 二次封装axios
import axios from 'axios'

// 全局配置
// 根据环境变量区分接口默认地址（前缀）
switch (process.env.NODE_ENV) {
  case 'prod':
    axios.defaults.baseURL = 'http:/www.hcshow.online/blog'
    break
  case 'test':
    axios.defaults.baseURL = 'http://localhost/blog'
    break
  default:// dev
    axios.defaults.baseURL = 'http://127.0.0.1/blog'
}
// 请求超时时间
axios.defaults.timeout = 6000

// CROS跨域是否允许凭证
axios.defaults.withCredentials = true

// axios.post默认情况下传递到后台的数据是JSON格式的
// 通过下面方式设置POST请求头，告诉服务器请求主体的数据格式：a=aaaa&b=bbbb
// 需要导入 import qs from 'qs'
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// axios.defaults.transformRequest = data => qs.stringify(data)

// 请求拦截器：axios前置拦截
axios.interceptors.request.use(config => { // config指请求对象
// 通过axios请求拦截器添加token，保证拥有获取数据的权限
  const token = window.localStorage.getItem('token')
  if (token !== null) {
    config.headers.Authorization = token
  }
  return config
}, error => {
  // 如果拦截失败返回失败信息
  return Promise.reject(error)
})

//   // 自定义响应成功的HTTP状态码（一般情况下用配置）
// // 设置什么才算成功，什么时候才算失败
// axios.defaults.validateStatus = status => {
//   // 默认大于等200小于300的才算成功
//   return /^(2|3)\d{2}$/.test(status) //设置2和3开头的都算成功
// }

// 响应拦截器：axios后置拦截
axios.interceptors.response.use(res => {
    return res
}, error => {
  // 请求已发送，只不状态码不是200系列，设置不同状态码的不同处理
  if (error.response) { // 如果服务器有返回信息
    switch (error.response.status) {
      case 401: // 当前请求需要用户登录（一般是未登录）
        break
      case 403: // 服务器已经理解请求，但是拒绝执行它（一般是TOKEN过期）
        localStorage.removeItem('token')
        // 跳转的登录页面
        break
      case 404: // 请求失败，资源没有找到
        break
    }
    return Promise.reject(error.response)
  } else { // 如果服务器没有返回信息
    // 断网处理
    if (!window.navigator.onLine) {
      // 网络断开时，让其跳转到其它网页
      return
    }
    return Promise.reject(error)
  }
})

export default axios

如果要使项目能够根据环境变量区分接口默认地址，需要在package.json中进行配置：

"scripts": {
  "serve": "vue-cli-service serve",
  "comment1": "测试环境",
  "serve:test": "set NODE_ENV=test&&vue-cli-service serve",
  "comment1": "生产环境",
  "serve:prod": "set NODE_ENV=prod&&vue-cli-service serve",
……
},

之后采用npm run serve:test会启动测试环境，此时对应的服务器连接根地址为：http://localhost/blog……

第二步：服务器代码

@GetMapping("/f11")
public String f11(Integer pageNum, Integer pageSize) {
    return pageNum + " : " + pageSize;
}
@PostMapping("/f21")
public String f21(@RequestBody String param) {
    return param;
}

第三步：API集中式管理

采用集中式管理API是为了便于管理接口。
在项目根目录下创建目录api，然后依次在其中创建user.js、blog.js、api.js：文章来源地址https://www.toymoban.com/news/detail-664453.html

user.js

import axios from '../utils/http'

function login () {
  return axios.post('/f21', {
    data: {
      username: 'zhagnsan',
      password: '1234'
    }
  })
}

export default {
  login
}

blog.js

import axios from '../utils/http'

function getBlogsWithPage () {
  return axios.get('/f11', {
    params: {
      pageNum: 11,
      pageSize: 8
    }
  })
}

export default {
  getBlogsWithPage
}

api.js：用来进行集中导入

// 定义数据请求的唯一入口
import user from './user'
import blog from './blog'

export default {
  user,
  blog
}

第四步：在main.js文件中全局引入：

import api from './api/api'
Vue.prototype.$api = api

第五步：在vue页面中具体使用：

<template>
  <div class="home">
    <button @click="getFun">发送get请求</button>
    <button @click="postFun">发送post请求</button>
  </div>
</template>

<script>
  export default {
    methods: {
      getFun () {
        this.$api.blog.getBlogsWithPage().then(res => {
          console.log(res)
        })
      },
      postFun () {
        this.$api.user.login().then(res => {
          console.log(res)
        })
      }
    }
  }
</script>