vue封装axios

为什么要封装

对于前端来说，将api集中到一个文件跟方便管理，那么就需要对axios进行封装，封装的同时也可以简化调用接口的代码。

以用户注册为例：
未封装前

           this.$axios.post('http://localhost:5000/api/users/register',this.ruleForm).then(()=>{
             //注册成功
             this.$message({
               message:'账号注册成功',
               type:'success'
             });
             this.$router.push({path:'/login'})
           }).catch(err=>{
             console.log(err);
           })

post方法的url参数要写很长一段，而且只看“this.$axios.post”的话接口调用目的也不清晰

封装后

          regeister(this.ruleForm)
            .then(() => {
              console.log("测试2");
              this.$message({
                message: "账号注册成功",
                type: "success"
              });
              this.$router.push({ path: "/login" });
            })
            .catch(err => {
              console.log(err);
            });

参数变得简介，并且通过函数名regeister可以很清楚的知道这个接口是要用来注册的

如何封装

• 首先在引入了‘axios’的js文件中添加以下代码

/**
 * @param url
 * @param method get|post|put|delete...
 * @param params like queryString. if a url is index?a=1&b=2, params = {a: '1', b: '2'}
 * @param data post data, use for method put|post
 * @returns {Promise}
 */
function ajax(url, method, options) {
    if (options !== undefined) {
      var {params = {}, data = {}} = options
    } else {
      params = data = {}
    }
    return new Promise((resolve, reject) => {
      axios({
        url,
        method,
        params,
        data
      }).then(res => {
        resolve(res)
      }, res => {
        // API请求异常，一般为Server error 或 network error
        reject(res)
      })
    })
  }
export default ajax;

• 然后新建一个名为API的js文件，引入上面的ajax，在文件集中写入要调用的接口

import ajax from './ajax'
export const regeister = data =>
    ajax('http://localhost:5000/api/users/register', 'post', { data })
export const login = data =>
    ajax('http://localhost:5000/api/users/login', 'post', { data })

• 最后在要调用接口的页面调用接口

//Register.vue

import {regeister} from "../api/API";

          regeister(this.ruleForm)
            .then(() => {
              console.log("测试2");
              this.$message({
                message: "账号注册成功",
                type: "success"
              });
              this.$router.push({ path: "/login" });
            })
            .catch(err => {
              console.log(err);
            });