欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

結合axios對項目中的api請求進行封裝操作

 更新時間:2020年09月21日 10:15:16   作者:進軍的蝸牛  
這篇文章主要介紹了結合axios對項目中的api請求進行封裝操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

痛點:

1. 后端對全部請求的url進行了調整。

2.后端要求給所有的請求頭部添加一個token, 或者對請求添加其他全局處理。

3.請求代碼直接寫在每個頁面里, 看起來代碼臃腫,不夠簡練,太難管理。

4.看到請求代碼, 不明白該請求是干嘛的,語義化不夠明顯。 ...

上面列舉的是一些常見的問題,如果沒對api進行封裝,當請求比較多的時候,修改起來欲哭無淚,解決這些問題可以進行以下操作

1.對axios進行二次封裝

2.對全部api請求也進行封裝

如下是對axios 進行二次封裝, 文件名是 network/index.js:

import axios from "axios";
import Cookies from "js-cookie";
// 設置超時時間
const myAxios = axios.create({
 timeout: 5000
});

// 跳轉登錄頁面
function nav2Login() {
 location.href = '/xxxx/login'
}

// 添加一個請求攔截器
myAxios.interceptors.request.use(
 function(config) {
 // Do something before request is sent

 config.headers["token"] = Cookies.get("token") || "";
 return config;
 },
 function(error) {
 // Do something with request error
 return Promise.reject(error);
 }
);

// 添加一個響應攔截器
myAxios.interceptors.response.use(
 function(response) {
 // Do something with response data
 // 這里只是以200 401為示例, 其他狀態(tài)碼可以根據需要自行添加
 if (response.status === 200) {
  return response.data;
 } else if (response.status === 401) {
  nav2Login() 
  return Promise.reject();
 } else {
  return {
  status: 0,
  message: response.data.message
  };
 }
 },
 function(error) {
 // Do something with response error
 return Promise.reject(error);
 }
);

export default myAxios;

下面是對全部的api進行了封裝,文件名是 network/api.js:

import axios from "./index.js";

const API = {
 userList: 'api/user/all', // 用戶列表
 cityList: 'api/city/all', // 城市列表
};

function Axios(obj) {
 return axios({
 ...obj
 }).catch(e => {
 // 這里兜住error, 從而不影響后續(xù)代碼執(zhí)行,避免出現白屏
 return {
  status: 0,
  message: "網絡請求異常"
 };
 });
}

// 給函數命名的時候 盡量語義化
function getUserList(params) {
 return Axios({
 url: API.userList,
 method: "post",
 params
 });
}
function getCityList(params) {
 return Axios({
 url: API.cityList,
 method: "get",
 params
 });
}

export default {
 getUserList,
 getCityList,
}

可以把這些請求掛載在一個全局的變量上, 以Vue為例:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import api from "@/network/api.js";
Vue.prototype.$api = api;

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Vue項目中使用方法如下:

this.$api.getUserList(obj).then(res => {
 // 處理res
}).catch(err){
 // 處理 err
}

// 或者使用async await 
async getUserList () {
 try {
  const res = await this.$api.getUserList(obj)
  // 處理res
 } catch (err) {
  // 處理err
 }
}

補充知識:Vue項目中對axios進行封裝以及api接口請求

對axios進行封裝:

/* 定義一個ajax請求函數,并且其返回值: promise對象(異步返回的數據是: response.data) */
import axios from 'axios';
export default function ajax (url, data={}, type='GET') {
 return new Promise(function (resolve, reject) {
 // 執(zhí)行異步ajax請求
 let promise
 if (type === 'GET') {
  // 準備url query參數數據,
  let dataStr = ''           //數據拼接字符串
  Object.keys(data).forEach(key => {
  dataStr += key + '=' + data[key] + '&'
  })
  if (dataStr !== '') {
  dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
  url = url + '?' + dataStr
  }
  // 發(fā)送get請求
  promise = axios.get(url)
 } else {
  // 發(fā)送post請求
  promise = axios.post(url, data)
 }
 promise.then(function (response) {
  // 成功了調用resolve()
  resolve(response.data)
 }).catch(function (error) {
  //失敗了調用reject()
  reject(error)
 })
 })
}

以上這篇結合axios對項目中的api請求進行封裝操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue3+Ts實現父子組件間傳值的兩種方式

    Vue3+Ts實現父子組件間傳值的兩種方式

    這篇文章主要給大家介紹了基于Vue3+Ts實現父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細,感興趣的同學可以參考閱讀
    2023-09-09
  • vue計算屬性想要傳入參數如何解決

    vue計算屬性想要傳入參數如何解決

    這篇文章主要介紹了vue計算屬性想要傳入參數如何解決問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 淺談VUE uni-app 模板語法

    淺談VUE uni-app 模板語法

    這篇文章主要介紹了uni-app 的模板語法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • 通過一個簡單的例子學會vuex與模塊化

    通過一個簡單的例子學會vuex與模塊化

    這篇文章主要給大家介紹了關于如何通過一個簡單的例子學會vuex與模塊化的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2017-11-11
  • vue中配置mint-ui報css錯誤問題的解決方法

    vue中配置mint-ui報css錯誤問題的解決方法

    本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法,非常具有實用價值,需要的朋友可以參考下
    2017-10-10
  • vue使用國密SM4進行加密、解密的過程

    vue使用國密SM4進行加密、解密的過程

    國密SM4算法是一種對稱加密算法,適用于對稱密鑰加密和解密的場景,這篇文章主要介紹了vue使用國密SM4進行加密、解密,需要的朋友可以參考下
    2023-07-07
  • vue.js學習筆記之綁定style樣式和class列表

    vue.js學習筆記之綁定style樣式和class列表

    數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。這篇文章主要介紹了vue.js綁定style和class的相關資料,需要的朋友可以參考下
    2016-10-10
  • Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式

    Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式

    這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue+ElementUI 關閉對話框清空驗證,清除form表單的操作

    vue+ElementUI 關閉對話框清空驗證,清除form表單的操作

    這篇文章主要介紹了vue+ElementUI 關閉對話框清空驗證,清除form表單的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue3系統(tǒng)進入頁面前的權限判斷和重定向方式

    vue3系統(tǒng)進入頁面前的權限判斷和重定向方式

    這篇文章主要介紹了vue3系統(tǒng)進入頁面前的權限判斷和重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論