Inhaltsverzeichnis
uniapp 项目配置 axios
Heim Web-Frontend uni-app Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

Sep 15, 2021 pm 07:41 PM
axios uniapp

Die folgende Kolumne „Uniapp-Tutorial“ führt Sie in die Methode zur Einführung von Axios im Uniapp-Projekt ein und vermittelt Ihnen einige Grundkenntnisse darüber, wie Sie mit Credentials Cookies und Backend-Konfigurationen erhalten können, die nicht gleichzeitig über Domänen hinweg verwendet werden können an alle!

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

Installieren Sie axios

axios

1、首先检查是否安装 npm 工具:工具 --> 插件安装

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

2、检查是否安装 npm,如果没有可以去看我的这篇文章:windows安装node.js用npm安装vue

3、安装后在当前目录下打开内置终端:(和前几步一样检查插件安装与否)

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

4、在终端输入:npm install axios 安装 axios

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

5、安装后如下所示:(node_modules 出现 axios)

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

uniapp 项目配置 axios

  • 创建 utils 文件按自己所需创建 .js 文件 

    Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

  • 引入 axios

import Vue from 'vue'
import axios from 'axios'
Nach dem Login kopieren
  • 配置如下:(注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用,会报错哦提醒你了!)

import Vue from 'vue'
import axios from 'axios'

// create an axios instance
const service = axios.create({
	baseURL: 'https://www.yongjiachen.top/jccrm', // url = base url + request url
	//withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用
	timeout: 6000, // request timeout
	crossDomain: true
})

// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
    config => {
        // if (store.state.token) {
        //     // 给请求头添加user-token
        //     config.headers["user-token"] = store.state.token;
        // }
        console.log('请求拦截成功')
        return config;
    },
    error => {
        console.log(error); // for debug
        return Promise.reject(error);
    }
); 

//配置成功后的拦截器
service.interceptors.response.use(res => {
    if (res.data.status== 200) {
        return res.data
    } else {
        return Promise.reject(res.data.msg);
    }
}, error => {
	if (error.response.status) {
		switch (error.response.status) {
			case 401:
				break;
			default:
				break;
		}
	}
    return Promise.reject(error)
})


// 在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
axios.defaults.adapter = function(config) { 
    return new Promise((resolve, reject) => {
        console.log(config)
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                console.log("执行完成:",response)
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };

                settle(resolve, reject, response);
            }
        })
    })
}

export default service
Nach dem Login kopieren
  • 在项目根目录的 main.js 配置引入全局 axios

    Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

// 引入封装后的axios
import axios from './utils/request/request.js'
/**
 * 给Vue函数添加一个原型属性$axios 指向Axios
 * 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了
 * 在.vue中使用,this.$axios.get
 * @param {Object} config
 */
Vue.prototype.$axios = axios
Nach dem Login kopieren
  • 愉快的使用 axios1. Überprüfen Sie zunächst, ob das npm-Tool installiert ist: Tools-->

    Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

    Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

    2. Überprüfen Sie, ob npm installiert ist. Wenn nicht, können Sie diesen Artikel von mir lesen: windows Installieren Sie node.js und installieren Sie vue mit npm
  • 3. Öffnen Sie nach der Installation das integrierte Terminal im aktuellen Verzeichnis: (Überprüfen Sie, ob das Plug-In wie in den vorherigen Schritten installiert ist)

    Ausführliche Erklärung zur Einführung von Axios im Uniapp-ProjektAusführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

    4. Geben Sie im Terminal ein: npm install axios Install axios
Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

5. Nach der Installation ist es wie folgt: (axios erscheint in node_modules)

Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt

uniapp Projektkonfiguration <code>axios🎜
    🎜🎜🎜Erstellen Sie utils-Dateien und erstellen Sie .js-Dateien entsprechend Ihren Anforderungen🎜 🎜🎜Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt
    🎜🎜🎜🎜 🎜Wir stellen vor: axios🎜🎜🎜🎜rrreee
      🎜🎜 🎜Die Konfiguration ist wie folgt: (Hinweis: withCredentials ermöglicht den Erhalt von Cookies und die domänenübergreifende Backend-Konfiguration. Sie können nicht gleichzeitig verwendet werden. Zur Erinnerung wird ein Fehler gemeldet! )🎜🎜🎜🎜rrreee
        🎜🎜🎜Fügen Sie globale axios in der main.js-Konfiguration im Projekt ein Stammverzeichnis 🎜🎜🎜Ausführliche Erklärung zur Einführung von Axios im Uniapp-Projekt 🎜🎜 🎜rrreee
          🎜🎜🎜happy Use axios 🎜🎜🎜🎜🎜🎜🎜🎜🎜Rendering: 🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜Ursprüngliche Adresse: https://juejin.cn/post/7005042333288759333🎜🎜Autor: Sunny_Chen🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Einführung von Axios im Uniapp-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts Apr 08, 2024 pm 06:42 PM

So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts

Was ist besser, Uniapp oder Mui? Was ist besser, Uniapp oder Mui? Apr 06, 2024 am 05:18 AM

Was ist besser, Uniapp oder Mui?

Welche Entwicklungstools verwendet Uniapp? Welche Entwicklungstools verwendet Uniapp? Apr 06, 2024 am 04:27 AM

Welche Entwicklungstools verwendet Uniapp?

Welche Grundlagen sind zum Erlernen von uniapp erforderlich? Welche Grundlagen sind zum Erlernen von uniapp erforderlich? Apr 06, 2024 am 04:45 AM

Welche Grundlagen sind zum Erlernen von uniapp erforderlich?

Was sind die Nachteile von uniapp Was sind die Nachteile von uniapp Apr 06, 2024 am 04:06 AM

Was sind die Nachteile von uniapp

Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften Dec 23, 2023 pm 02:16 PM

Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften

Was ist besser: Uniapp oder native Entwicklung? Was ist besser: Uniapp oder native Entwicklung? Apr 06, 2024 am 05:06 AM

Was ist besser: Uniapp oder native Entwicklung?

Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln? Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln? Apr 06, 2024 am 03:54 AM

Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln?

See all articles