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

微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解

 更新時間:2023年02月09日 11:52:57   作者:程序不了猿  
小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個程序與服務(wù)端交互的完整鏈路,但需要大量的定制化代碼,才能實現(xiàn)請求攔截和響應(yīng)攔截,不太符合大多數(shù)開發(fā)者的使用習慣,對于前端開發(fā)者來說,網(wǎng)絡(luò)層還得是axios

背景

小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個程序與服務(wù)端交互的完整鏈路,但需要大量的定制化代碼,才能實現(xiàn)請求攔截和響應(yīng)攔截,不太符合大多數(shù)開發(fā)者的使用習慣,對于前端開發(fā)者來說,網(wǎng)絡(luò)層還得是axios。

本片主要講一下小程序網(wǎng)絡(luò)層使用axios的簡要總結(jié),這是一個最精簡的一個demo,大家可以在這個基礎(chǔ)上去擴充實踐。

依賴

這邊需要注意的是使用uni-vue3版本時axios的版本需要0.26.0以下,建議鎖版本

npm i axios@0.26.0 axios-miniprogram-adapter
&&
yarn add axios@0.26.0 axios-miniprogram-adapter

axios-miniprogram-adapter這個依賴主要是適配小程序網(wǎng)絡(luò)請求的適配器,這個適配器的原理大家感興趣可以去了解一下,簡單來說**,axios在發(fā)起網(wǎng)絡(luò)請求時會先判斷用戶是否定義的適配器,如果定義了那就使用適配器發(fā)起網(wǎng)絡(luò)請求,如果沒有定義它會前判斷環(huán)境,node環(huán)境使用http(與服務(wù)端一致),瀏覽器環(huán)境使用xhr(高版本可能用fetch,具體是否用大家可以看一下源碼)。**所以可以得出一個優(yōu)先級 adapter >http(node)或xhr(瀏覽器)。

最簡demo

import axios, { AxiosRequestConfig } from 'axios';
import mpAdapter from 'axios-miniprogram-adapter'
import { globalConfig } from '../config';
// base_url
const baseURL = globalConfig.BASE_URL;
// @ts-ignore
// 適配器
axios.defaults.adapter = mpAdapter
// axios初始化實例
const axiosIns = axios.create({
  baseURL,
  timeout: 10000,
});
// request 請求攔截器,處理邏輯
axiosIns.interceptors.request.use(
  async (axiosConfig) => {
    const config = axiosConfig as any;
    config.headers = {
        contentType: 'application/json;charset=UTF-8',
      };
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);
//  response攔截器
axiosIns.interceptors.response.use(
  (response) => {
    const responData = response.data;
    const { rtnFlag } = responData;
    // 判斷業(yè)務(wù)是否成功
    if (rtnFlag !== '9999') {
      // 失敗
      return Promise.reject(responData);
    }
    // 成功
    return Promise.resolve(responData);
  },
  (err) => {
    return Promise.reject(err);
  },
);
export default axiosIns

自定義適配器

如果不用axios-miniprogram-adapter這個依賴,大家也可以如下自定義適配器,這個在uni、微信、支付中可以通用,但注意uni-vue3版本中axios版本需要0.26.0鎖死(這個是個人嘗試的成功版本,有時間大家可以繼續(xù)探索)

import axios, { AxiosRequestConfig } from 'axios';
import settle from 'axios/lib/core/settle';
import buildURL from 'axios/lib/helpers/buildURL';
// 自定義適配器適配uniapp語法
axios.defaults.adapter = function (config: any) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...config,
      method: config.method.toUpperCase(),
      header:config.headers,
      url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
      complete: (response: any) => {
        response = {
          ...response,
          config,
        };
        settle(resolve, reject, response);
      },
    });
  });
};

到此這篇關(guān)于微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解的文章就介紹到這了,更多相關(guān)小程序與axios網(wǎng)絡(luò)層封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解js中==與===的區(qū)別

    詳解js中==與===的區(qū)別

    本文主要介紹了js中==與===的相同點與不同點。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • 關(guān)于微信中a鏈接無法跳轉(zhuǎn)問題

    關(guān)于微信中a鏈接無法跳轉(zhuǎn)問題

    微信頁面開發(fā)時,各個主頁之間的跳轉(zhuǎn),完全是通過a鏈接進行的,但是來回跳轉(zhuǎn)幾次,再次從其他主頁面跳回首頁的時候,微信頭部出現(xiàn)了跳轉(zhuǎn)加載進度條,但是就是不跳轉(zhuǎn),也沒有任何反應(yīng),怎么回事呢?下面小編給大家解答下
    2016-08-08
  • javascript的BOM匯總

    javascript的BOM匯總

    本文給大家匯總了一些javascript的BOM相關(guān)方法,有需要的小伙伴可以參考下。
    2015-07-07
  • javascript中全局對象的isNaN()方法使用介紹

    javascript中全局對象的isNaN()方法使用介紹

    全局對象的isNaN()方法通常用于檢測 parseFloat() 和 parseInt() 的結(jié)果,下面為大家介紹下其具體的使用,感興趣的朋友可以參考下
    2013-12-12
  • 輕松實現(xiàn)js彈框顯示選項

    輕松實現(xiàn)js彈框顯示選項

    這篇文章主要為大家詳細介紹了js輕松實現(xiàn)彈框顯示選項效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • js實現(xiàn)翻牌小游戲

    js實現(xiàn)翻牌小游戲

    這篇文章主要為大家詳細介紹了js實現(xiàn)翻牌小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】

    微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下
    2018-12-12
  • URL的參數(shù)中有加號傳值變?yōu)榭崭竦膯栴}(URL特殊字符)

    URL的參數(shù)中有加號傳值變?yōu)榭崭竦膯栴}(URL特殊字符)

    今天在調(diào)試客戶端向服務(wù)器傳遞參數(shù)時,參數(shù)中的“+”全部變成了空格,原因是URL中默認的將“+”號轉(zhuǎn)義了,經(jīng)過以下步驟解決了,需要的朋友可以參考一下
    2016-11-11
  • Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解

    Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解

    這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • 淺析JS中document對象的一些重要屬性

    淺析JS中document對象的一些重要屬性

    本篇文章主要是對JS中document對象的一些重要屬性進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03

最新評論