vue cli對axios的二次封裝

2021-10-21 11:14:21 字數 1273 閱讀 5337

一.首頁在src目錄下建立兩個資料夾

分別為utils和api

二.分別在資料夾下新建兩個檔案

request.js用來封裝axios,login.js用於封裝api

三.直接上**,學會自己理解

1.request.js完整**(放在utils目錄下)

import axios from 'axios'

//建立乙個axios物件

const instance = axios.create()

//請求攔截

instance.interceptors.request.use(

config => ,

err =>

)// 響應攔截

//根據伺服器狀態碼做響應處理

instance.interceptors.response.use(

function(res) ,

function(err) = err

if (response)

} else

}return promise.reject(err)

})export function get(url, params) )

}export function post(url, data)

export function put(url, data)

export function del(url, data)

2.login.js完整**(放在api目錄下)

import  from "@/utils/request"

export function selectusers()

3.login.vue完整**,裡面有呼叫

>

>

v-model

="input"

placeholder

="請輸入內容"

>

el-input

>

>

1344span

>

div>

template

>

>

import

from

"@/api/login"

export

default},

created()

)}}script

>

四.如果報錯中含有cros,就是介面跨域問題,自行去網上找解決方案

axios二次封裝

引入路由 import router from router index 引入vuex import store from store index 引入提示元件 import from element ui 引入api import apilist from apilist 引入qs let htt...

axios二次封裝

axios封裝 axios請求 axios二次封裝 封裝公共請求 123 4567 891011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 import axios from axios import from element ui...

axios的二次封裝

這次是對axios進行簡單的二次封裝 vue專案中 提供ajax請求 對axios進行二次封裝 判斷是否成功 return this issuccess response 判斷響應結果是否成功 static issuccess res else 構建失敗物件 static requestexpect...