在前段项目中，请求 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': '' } } } }}
推荐教程：《php教程》《js教程》
以上就是在 vue 里面对 axios 进行封装的详细内容。