Heim >Web-Frontend >js-Tutorial >Einkapselung von Axios in Vue
Im vorherigen Projekt sind die Anforderungs-API und die Anforderungsmethode gekapselt. Diese Kapselung dient der Einfachheit, der besseren Verwaltung der vom Backend bereitgestellten Schnittstelle und der Wiederverwendbarkeit des Anforderungscodes einfache Codeänderung.
Axios installieren
$ npm install axios
Verzeichnisdatei erstellen
HTTP-Verzeichnis in src erstellen
In http erstellen einen http.js-Benutzer im Verzeichnis und fordern Sie die Methode an
Erstellen Sie api.js im http-Verzeichnis, um die vom Back-End bereitgestellte Schnittstelle zu speichern
Erstellen Sie einen axios.js-Benutzer im http-Verzeichnis axios interception Device
Erstellen Sie vue.config.js im Stammverzeichnis. Benutzeranfrage-Proxy-Konfiguration
Der nächste Schritt ist der Code
Code in project/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) } }, }
Sie können eine Datei-API unter project/scr/http/ erstellen und dann eine Schnittstellendatei entsprechend dem Projektmodul erstellen, um die Verwaltung zu erleichtern
Project/scr/http/ api.js-Code
import Goods from './api/goods.js'; export default { // 首页 Index: { index: '/index/index' }, // 个人中心 Home: { UserInfo: '/user/info' }, // 当然也可以用文件方式进行管理 Goods: Goods }
Code in project/scr/http/api/goods.js
export default { GoodsShow: '/goods/default' }
Code in project/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); } } })
The oben ist fertig. Dann besteht der nächste Schritt darin, den Code in project/scr/min.js hinzuzufügen
Der Code in project/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>
Der nächste Schritt besteht darin, die Proxy-Konfiguration hinzuzufügen
Project/vue .config.js-Code
// 后端请求地址 注意[他会根据你环境的不同从而获取的 env 文件不同] const target = process.env.APP_API_URL; module.exports = { devServer: { // 所有的接口请求代理 proxy: { '/api': { target: target, changeOrigin: true, ws: true, pathRewrite: { '^api': '' } } } } }
Empfohlene Tutorials: „PHP-Tutorial“ „JS-Tutorial“
Das obige ist der detaillierte Inhalt vonEinkapselung von Axios in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!