最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

背景

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

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

依賴

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

最簡(jiǎn)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初始化實(shí)例
const axiosIns = axios.create({
  baseURL,
  timeout: 10000,
});
// request 請(qǐng)求攔截器,處理邏輯
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這個(gè)依賴,大家也可以如下自定義適配器,這個(gè)在uni、微信、支付中可以通用,但注意uni-vue3版本中axios版本需要0.26.0鎖死(這個(gè)是個(gè)人嘗試的成功版本,有時(shí)間大家可以繼續(xù)探索)

import axios, { AxiosRequestConfig } from 'axios';
import settle from 'axios/lib/core/settle';
import buildURL from 'axios/lib/helpers/buildURL';
// 自定義適配器適配uniapp語(yǔ)法
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ò)程詳解的文章就介紹到這了,更多相關(guān)小程序與axios網(wǎng)絡(luò)層封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論

龙里县| 博客| 昌江| 社会| 郸城县| 南丹县| 西和县| 永年县| 盐源县| 怀远县| 迁西县| 应城市| 辽源市| 自贡市| 阳原县| 巫山县| 师宗县| 怀宁县| 白朗县| 宁城县| 开化县| 焦作市| 宜川县| 文安县| 垣曲县| 宣武区| 祁连县| 徐水县| 千阳县| 吉木乃县| 屏东县| 双鸭山市| 南丹县| 睢宁县| 乌拉特后旗| 浮梁县| 苍山县| 新巴尔虎左旗| 明水县| 阿图什市| 互助|