項目中接口會很多，個人喜歡創(chuàng)建api文件對請求統(tǒng)一管理

1.新建api文件夾，文件夾下創(chuàng)建 axios.js，login.js

2.? axios.js

import axios from 'axios'import router from '../router' //引入路由是為了做重定向，比如沒有登錄過期定向到登錄頁面 // 創(chuàng)建axios實例 const instance = axios.create({baseURL: '', // api的base_urltimeout: 15000, // 請求超時時間headers: { 'content-type': 'application/json;charset=UTF-8' } })// 攔截請求 instance.interceptors.request.use(config => {// 可以在此處添加 tokenreturn config },error => {return Promise.reject(error) }) // 攔截響應 instance.interceptors.response.use(res => {//可以在此處攔截接口錯誤return res}, error => {return Promise.reject(error) }) export default instance復制代碼

3. login.js

此文件我一般安裝模塊來創(chuàng)建多個

import instance from '@/api/axios'//引入axios文件export function loginByUsername(obj) {return instance.post(`/api/a/login`, obj) } export function logout() {// 退出 return instance.post(`/api/a/logout`) }復制代碼

4.? login.vue

<template> 登錄的實現(xiàn) </template> <script> import { loginByUsername } from "@/api/login" //引入api文件methods: {login(){var obj = {name:'test',password:'test'}loginByUsername(obj).then(res=>{console.log(res)})} } </script>復制代碼

轉載于:https://juejin.im/post/5ce523ede51d45508c2fb7a3

總結

以上是生活随笔為你收集整理的vue项目中对axios的全局封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。