在 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 'axios';

export default {

/**

* get 请求

* @param url 接口路由

* @param auth 是否需要带登录信息

* @returns {AxiosPromise<any>}

*/

get(url, auth = false) {

if (auth) {

return axios.get(url, {headers: {Authorization: 'Your back-end user authenticates information'}});

} else {

return axios.get(url);

}

},

/**

* post 请求

*

* @param url 接口路由

* @param data 接口参数

* @param auth 是否需要带登录信息

* @returns {AxiosPromise<any>}

*/

post(url, data, auth = false) {

if (auth) {

return axios.post(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});

} else {

return axios.post(url, data);

}

},

/**

* put请求

* @param url 接口路由

* @param data 接口参数

* @param auth 是否需要带登录信息

* @returns {AxiosPromise<any>}

*/

put(url, data, auth = false) {

if (auth) {

return axios.put(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});

} else {

return axios.put(url, data);

}

},

/**

* 删除

* @param url 接口路由

* @param auth 是否需要带登录信息

* @returns {AxiosPromise}

*/

del(url, auth = false) {

if (auth) {

return axios.delete(url, {headers: {Authorization: 'Your back-end user authenticates information'}});

} else {

return axios.delete(url);

}

},

/**

* 上传文件

* @param url 接口路由

* @param file 接口文件

* @param auth 是否需要带登录信息

*/

uploader(url, file, auth = false) {

let param = new FormData();

param.append('file', file)

if (auth) {

return axios.post(url, param, {headers: {Authorization: 'Your back-end user authenticates information'}})

} else {

return axios.post(url, param)

}

},

}

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

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

import Goods from './api/goods.js';

export default {

// 首页

Index: {

index: '/index/index'

},

// 个人中心

Home: {

UserInfo: '/user/info'

},

// 当然也可以用文件方式进行管理

Goods: Goods

}

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

export default {

GoodsShow: '/goods/default'

}

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

import axios from 'axios';

// 请求拦截

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 'vue';

import App from './App.vue';

import api from './http/api';

import http from './http/http';

// axios 拦截器

import './http/axios'

// 对后端接口 进行全局注册

Vue.prototype.$api = api;

// 对请求方式 进行全局注册

Vue.prototype.$http = http;

那么接下来就是使用了

项目 /src/views/index/index.vue 中我们对他进行使用

<template>

<div>

</div>

</template>

<script>

export default {

name: "Index",

mounted() {

this.handle()

},

methods: {

handle(){

// 当然如果你需要带登录信息去请求这个接口 可以在 路由后面跟上 true 或者 false 来决定是否在请求的时候带登录信息

// 我们这样进行封装 就对一个 请求封装好了。

this.$http.get(this.$api.Index.index,true).then((result) => {

})

}

}

}

</script>

<style scoped>

</style>

接下来是 代理配置

项目 /vue.config.js 代码

// 后端请求地址 注意[他会根据你环境的不同从而获取的 env 文件不同]

const target = process.env.APP_API_URL;

module.exports = {

devServer: {

// 所有的接口请求代理

proxy: {

'/api': {

target: target,

changeOrigin: true,

ws: true,

pathRewrite: {

'^api': ''

}

}

}

}

}

以上就是在 Vue 里面对 Axios 进行封装的详细内容,更多请关注网站的其它相关文章!

在 Vue 里面对 Axios 进行封装要怎么操作 (https://www.wpmee.com/) javascript教程 第1张 在 Vue 里面对 Axios 进行封装要怎么操作 (https://www.wpmee.com/) javascript教程 第2张

标签:,
赞一个

推荐主题

上一篇:

下一篇:

发表评论

登录后才能评论

猜你喜欢