在Vue里面对Axios进行封装

在前段项目中，请求 api 以及请求方式进行封装，该封装为了简单，更加好的管理后端所给的接口，请求代码的复用性，代码简单化。

安装 axios

   $ npm install axios

创建目录文件

在 src 中创建 http 目录

在 http 目录中创建 http.js 用户所以请求的方式

在 http 目录中创建 api.js 用于存放后端提供接口

在 http 目录中创建 axios.js 用户做 axios 拦截器

在根目录下面 创建 vue.config.js 用户 请求代理配置

接下里就是代码

项目 /scr/http/http.js 中代码

import axios from &＃39;axios&＃39;;
export default {
    /**
     * get 请求
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    get(url, auth = false) {
        if (auth) {
            return axios.get(url, {headers: {Authorization: &＃39;Your back-end user authenticates information&＃39;}});
        } else {
            return axios.get(url);
        }
    },
    /**
     * post 请求
     *
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    post(url, data, auth = false) {
        if (auth) {
            return axios.post(url, data, {headers: {Authorization: &＃39;Your back-end user authenticates information&＃39;}});
        } else {
            return axios.post(url, data);
        }
    },
    /**
     * put请求
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    put(url, data, auth = false) {
        if (auth) {
            return axios.put(url, data, {headers: {Authorization: &＃39;Your back-end user authenticates information&＃39;}});
        } else {
            return axios.put(url, data);
        }
    },
    /**
     * 删除
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    del(url, auth = false) {
        if (auth) {
            return axios.delete(url, {headers: {Authorization: &＃39;Your back-end user authenticates information&＃39;}});
        } else {
            return axios.delete(url);
        }
    },
    /**
     * 上传文件
     * @param url 接口路由
     * @param file 接口文件
     * @param auth 是否需要带登录信息
     */
    uploader(url, file, auth = false) {
        let param = new FormData();
        param.append(&＃39;file&＃39;, file)
        if (auth) {
            return axios.post(url, param, {headers: {Authorization: &＃39;Your back-end user authenticates information&＃39;}})
        } else {
            return axios.post(url, param)
        }
    },
}

可以在 项目 /scr/http/ 下面创建 一个文件 api 然后在里 根据 项目模块 创建 接口文件 方便管理

项目 /scr/http/api.js 代码

import Goods from &＃39;./api/goods.js&＃39;;
export default {
    // 首页
    Index: {
        index: &＃39;/index/index&＃39;
    },
    // 个人中心
    Home: {
        UserInfo: &＃39;/user/info&＃39;
    },
    // 当然也可以用文件方式进行管理
    Goods: Goods
}

项目 /scr/http/api/goods.js 中代码

export default {
    GoodsShow: &＃39;/goods/default&＃39;
}

项目 /scr/http/axios.js 中代码

import axios from &＃39;axios&＃39;;
// 请求拦截
axios.interceptors.request.use(cOnfig=> {
    // 1. 这个位置就请求前最后的配置
  // 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息
  return config
}, error => {
    return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(respOnse=> {
  // 请求成功
  // 1. 根据自己项目需求定制自己的拦截
  // 2. 然后返回数据
  return response;
}, error => {
    // 请求失败
      if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    // 对400错误您的处理\
                break
                case 401:
                    // 对 401 错误进行处理
                break
                default:
                // 如果以上都不是的处理
                return Promise.reject(error);
          }
    }
})

上面已经准备好了。那么接下来就是 项目 /scr/min.js 中添加代码

项目 /scr/min.js 中代码

import Vue from &＃39;vue&＃39;;
import App from &＃39;./App.vue&＃39;;
import api from &＃39;./http/api&＃39;;
import http from &＃39;./http/http&＃39;;
// axios 拦截器
import &＃39;./http/axios&＃39;
// 对后端接口 进行全局注册
Vue.prototype.$api = api;
// 对请求方式 进行全局注册
Vue.prototype.$http = http;
那么接下来就是使用了
项目 /src/views/index/index.vue 中我们对他进行使用

接下来是 代理配置

项目 /vue.config.js 代码

// 后端请求地址 注意[他会根据你环境的不同从而获取的 env 文件不同]
const target = process.env.APP_API_URL;
module.exports = {
  devServer: {
    // 所有的接口请求代理
  proxy: {
      &＃39;/api&＃39;: {
        target: target,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
              &＃39;^api&＃39;: &＃39;&＃39;
        }
      }
    }
  }
}

推荐教程：《PHP教程》《JS教程》

以上就是在 Vue 里面对 Axios 进行封装的详细内容，更多请关注 第一PHP社区 其它相关文章！