vue-axios封装

在没有封装API之前，我们是类似这样使用 axios 的

this.$axios.post('blogArticle/frontList',params)
.then((resp) => {
      this.blogList = resp.data,
      this.blogTotal = resp.total * 1
})

封装之后在页面中这样调用

<script>
import { getTreeselectList } from "../api/authority";
export default {
  mounted() {
    // 理想方式
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      getTreeselectList().then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

实现步骤

1.npm i axios并在main.js注册

// axios
import axios from 'axios'  
Vue.prototype.$axios = axios; 
//

2.修改跨域配置，在项目根目录/config/index.js下的proxyTable添加跨域代码：（其中接口网址取自qq音乐首页音乐馆页面）

proxyTable: {
      '/api': {
        //被代理的接口（你要调用的接口域名和端口号）
        // target: "http://172.21.93.222",
        target: "https://c.y.qq.com/splcloud/fcgi-bin",
        // target: "http://myzuul.com:9527/xdx",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ""        //用  /api  代替target里面的地址               
        },
        secure: true          // 如果是https接口，需要配置这个参数
      }
    },

3.新建src/request/index.js并写入

/**
 * ajax请求配置
 */
 import axios from 'axios'
 import { Message } from 'element-ui'
 
 // axios默认配置
 axios.defaults.timeout = 10000 // 超时时间
 // axios.defaults.baseURL 请求地址前缀
 // User地址
 // axios.defaults.baseURL = 'http://127.0.0.1:8001'
 // tools地址
 // axios.defaults.baseURL = 'http://127.0.0.1:8088'
 // 微服务地址
//  axios.defaults.baseURL = 'http://myzuul.com:9527/xdx' 需注释
 
 // 整理数据
 axios.defaults.transformRequest = function(data) {
     data = JSON.stringify(data)
     return data
 }
 
 // 路由请求拦截
 axios.interceptors.request.use(
     config => {
         config.headers['Content-Type'] = 'application/json;charset=UTF-8'
 
         return config
     },
     error => {
         return Promise.reject(error.response)
     })
 
 // 路由响应拦截
 axios.interceptors.response.use(
     response => {
         if (response.data.success === false) {
             return Message.error(response.data.errDesc)
         } else {
             return response.data
         }
     },
     error => {
         return Promise.reject(error.response) // 返回接口返回的错误信息
     })
 export default axios

如不需要请求拦截器之类的优化代码，也可以只在src/request/index.js写入：

import axios from "axios";

const request = axios.create({})
export default request

4.新建src/api/authority.js并写入

import request from '../utils/request1'

// 获取部门树的列表
export function getTreeselectList() {
  return request({
    url: ' /api/gethotkey.fcg?_=1645154896488&cv=4747474&ct=24&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=1&uin=956333786&g_tk_new_20200303=1537173401&g_tk=1537173401&hostUin=0 ',
    method: 'get'
  })
}

export function aaaaaaa() {
  return request({
    url: ' /api/aaaaaaa/xxxx',
    method: 'post'
  })
}

5.在页面中使用如下：

<template>
  <p>test api</p>
</template>

<script>
import { getTreeselectList } from "../api/authority";
export default {
  mounted() {
    // 理想方式
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      getTreeselectList().then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
</style>

总结完毕。