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

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!

Installez axiosaxios

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

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

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

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

5、安装后如下所示：（node_modules 出现 axios）

uniapp 项目配置 axios

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

  
  

• 引入 axios

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

• 配置如下：（注意：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

• 在项目根目录的 main.js 配置引入全局 axios

  

// 引入封装后的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

• 愉快的使用 axios

  1. Vérifiez d'abord si l'outil npm est installé : Outils-->

  

• 2. Vérifiez si vous installez npm. Sinon, vous pouvez lire cet article : windows Installez node.js et utilisez npm pour installer vue

  3. Après l'installation, ouvrez le terminal intégré dans le répertoire courant : (vérifiez si le plug-in est installé comme dans les étapes précédentes)

4. Entrez dans le terminal : npm install axios Installez axios

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

🎜🎜uniapp Configuration du projet <code>axios🎜

🎜🎜🎜Créez des fichiers utils et créez .js selon vos besoins🎜 🎜🎜
🎜🎜🎜🎜 🎜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 🎜🎜🎜 🎜🎜 🎜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!