基于Vue进一步封装axios

小编在接触vue实战b2b网站的时候，页面请求比较多，每次都要写axios全部流程，代码量超大，所以想到了个偷懒的办法(没办法本人比较懒)
首先在文件夹结构下面建立个api的文件夹，里面建立api.js文件，内容许下：☞

☞// 默认接收参数
☞//第一个总是authorization（用户token验证），
☞// 第二个为path 路径 ，
☞//第三个为params接收的DATA
import axios from 'axios';
let base = 'http://****************';
//----------------------------------------------------登录
export const requestLogin = params => { //
return axios.post(`${base}/***/***`, params) //路径
    .then(res => res.data) //成功的在data里
};
//----------------------------------------------------post
export const getList = (authorization, path, params) => {
  return axios({
    method: 'POST',
    url: `${base}/${path}`,
    headers: {
    'accessToken_cookie' : authorization
    },
    data: params
  })
}

image.png

··
在我们需要调用的页面进行调用相对应的分装好的方法名：例子☞ import {requestLogin,getList} from '../api/api'

image.png

在需要的地方直接去方法名传参进行请求☞
登录传入用户名和密码，不需要headers传token的时候☞

 var loginParams = {//需要传的参数
            loginName: this.ruleForm.name,
              loginPassword: this.ruleForm.desc
            };
            requestLogin(loginParams).then(data => { //调用封装的axios
              if (data.resultCode == 10000) {//成功状态码
                this.$message({//弹出成功消息框
                  showClose: true,
                  message: 'ok',
                  type: 'success'
                });
              }
            })

image.png

接下来是进行post请求，传参并且有请求头☞（小编把成功登录后服务器返回的token存在本地然后调取）

 var headers=window.sessionStorage.getItem("token");//取token
        var path='/*****/****'//路径
        var postData = {//需要传的参数
          pageInfo: {
            pageNo: 1,
            pageSize: 10
          }
        }
        getList(headers,path,postData).then(data => { //调用封装的axios
        console.log(data)//打印出来
        })

image.png
这样就ok了。希望帮助到更多的前端小伙伴
文章摘自：https://github.com/jf-wang/Vue-axios