科学的在vue中封装axios

最近需要重构一个原有项目，发现以前的项目每个组件中走一遍axios流程，最终写出“意大利面条”式的代码。况且很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。vuex结合axios，能够很好的进行封装。为了项目的结构清晰，我们可以创建一个api文件夹，只在这个地方处理请求。如下图所示：科学的在vue中封装axios

然后我们可以定义一个fetch文件在这里面封装axios。具体代码如下所示

import axios from 'axios'
import {baseUrl} from '../config/env'
import {Message} from 'element-ui'

const service = axios.create({
  baseURL: baseUrl,
  timeout: 10000,
})
const fetch = function (method, url, params, data) {
  // console.log("[axio] url:" + url + ",params:"+ JSON.stringify(params) + ",data:"+ JSON.stringify(data))
  return new Promise((resolve, reject) => {
    service({ url, method, params, data})
    .then((res) => {
      // console.log("[axio] return:", res)
      if(res.data.code === 0){
        resolve(res.data) 
      } else {
        // console.log(res.data)
        Message.warning(res.data.ch||res.data.message)
      }
    }).catch((err) => { 
      reject(err)
      console.log('err:',err);
    })
  })
}
export default fetch

baseUrl是我们请求的地址，然后我们可以定义一个proxy文件在这里面处理请求

import fetch  from './fetch'
import fetchrate  from './fetchrate'
// 用户登录
export function login(data) {
    return fetch('post', 'url参数', null, data);
}
// 获得用户列表
export function getUser(params) {
    return fetch('get', 'url参数', params, null);
}

这样的话我们就已经把请求都处理完毕然后在需要的地方调用就行比如我想调用这个登陆接口：

methods: {
    async login(formName) {
      let body = {
        username: this.ruleForm.username,
        password: this.ruleForm.password
      };
      let data = await api.login(body);
      let obj = data.res;
      obj.login = true;
      sessionStorage.setItem("ms_username", JSON.stringify(obj));
      this.$router.push({ path: "/" });
      
    }
  }

这样，我们对axios的简单封装就算完毕了，希望对你们有点帮助

科学的在vue中封装axios

相关推荐