Maison > interface Web > uni-app > Explication détaillée de la façon d'introduire axios dans le projet uniapp

Explication détaillée de la façon d'introduire axios dans le projet uniapp

青灯夜游
Libérer: 2021-09-15 19:43:20
avant
16603 Les gens l'ont consulté

La colonne tutoriel uniapp suivante vous présentera la méthode d'introduction d'axios dans le projet uniapp et comprendra certaines connaissances de base qui withCredentials permettent d'obtenir des cookies et des configurations back-end qui ne peuvent pas être utilisées simultanément sur plusieurs domaines, j'espère que ce sera le cas. soyez utile à tout le monde!

Explication détaillée de la façon d'introduire axios dans le projet uniapp

Installez axiosaxios

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

Explication détaillée de la façon dintroduire axios dans le projet uniapp

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

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

Explication détaillée de la façon dintroduire axios dans le projet uniapp

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

Explication détaillée de la façon dintroduire axios dans le projet uniapp

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

Explication détaillée de la façon dintroduire axios dans le projet uniapp

uniapp 项目配置 axios

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

    Explication détaillée de la façon dintroduire axios dans le projet uniapp

  • 引入 axios

import Vue from 'vue'
import axios from 'axios'
Copier après la connexion
  • 配置如下:(注意: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
Copier après la connexion
  • 在项目根目录的 main.js 配置引入全局 axios

    Explication détaillée de la façon dintroduire axios dans le projet uniapp

// 引入封装后的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
Copier après la connexion
4. Entrez dans le terminal : npm install axios Installez axios

Explication détaillée de la façon dintroduire axios dans le projet uniapp

5. Après installation, c'est comme suit : (axios apparaît dans node_modules)

Explication détaillée de la façon dintroduire axios dans le projet uniapp

🎜🎜uniapp Configuration du projet <code>axios🎜
    🎜🎜🎜Créez des fichiers utils et créez .js selon vos besoins🎜 🎜🎜Explication détaillée de la façon dintroduire axios dans le projet uniapp
    🎜🎜🎜🎜 🎜Présentation de axios🎜🎜🎜🎜rrreee
      🎜🎜 🎜La configuration est la suivante : (Remarque : withCredentials permet d'obtenir des cookies et une configuration backend inter-domaines. Ils ne peuvent pas être utilisés en même temps. Une erreur sera signalée pour vous le rappeler ! )🎜🎜🎜🎜rrreee
        🎜🎜🎜Introduire axios global dans la configuration main.js du projet répertoire racine 🎜🎜🎜Explication détaillée de la façon dintroduire axios dans le projet uniapp 🎜🎜 🎜rrreee
          🎜🎜🎜Bon usageaxios🎜🎜🎜🎜🎜🎜🎜🎜🎜Rendu : 🎜🎜🎜🎜🎜🎜 🎜 🎜🎜🎜🎜Adresse originale : https://juejin.cn/post/7005042333288759333🎜🎜Auteur : Sunny_Chen🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:掘金--Sunny_Chen
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal