封裝使用axios進行介面請求

npm install axios在main.js引入

import axios from "axios"

import axios from 'axios'

import from 'vant' // toust是vant元件中輕提示，可根據專案更改

if (process.env.node_env === 'development')  else if (process.env.node_env === 'debug')  else if (process.env.node_env === 'production')

axios.defaults.timeout = 10000; // 10s

請求攔截（判斷已經登入才請求）

axios.interceptors.request.use( 

config => 
return config;
},error => 
)

axios.interceptors.response.use(

response => else 
},// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼 
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error => 
});break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面 
case 403:
toast('登入過期，請重新登入');
// 清除token
localstorage.removeitem('token'); // 這裡是本地儲存的清除，需根據實際情況清除
store.commit('loginsuccess', null); // 這裡是vuex狀態的清除，需根據實際情況清除
// 跳轉登入頁面，並將要瀏覽的頁面fullpath傳過去，登入成功後跳轉需要訪問的頁面 
settimeout(() => 
});}, 1000);
break;
// 404請求不存在
case 404:
toast( '網路請求不存在');
break;
// 其他錯誤，直接丟擲錯誤提示
default:
toast( error.response.data.message);
}return promise.reject(error.response);
}})

export default axios;

import request from '@/utils/request'; // 路徑根據實踐情況

import qs from 'qs'; // 安裝引入qs用於序列化引數（axios post方法需要傳遞序列化的引數）

export function login(data) )

}

export function getinfo(data) )

}

axios的post和get方法傳參略有不同：

post請求引數必須序列化，可以使用qs模組

post請求傳送引數使用data: {}，data是作為請求主體被傳送的資料

get請求傳送引數使用params: {}，params是即將與請求一起傳送的 url 引數

import * as 名稱 from '路徑': // 例：import * as http from "@/api/login";

vue封裝axios介面請求

home.vue home getverytakeinformation get非攜參請求資料 button gettakeinformation get攜參請求資料 button postdata post攜參請求資料 button div template import from request...

小程式封裝介面請求

config.js裡引入封裝介面 小程式配置檔案 var host test1 https icpmotes mobile 測試環境 var host test1 本地環境 var host test2 測試環境 var host test3 生產環境 var host host test1 let...

vue3一下的axios封裝（介面請求封裝）

1.安裝axios依賴 npm i axios s 2.建立乙個utils檔案，和乙個api檔案，在前者下面建立乙個request.js的檔案。該檔案中引入axios import axios from axios 3.開始操作 封裝axios import axios from axios 引入a...