>  기사  >  웹 프론트엔드  >  uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

青灯夜游
青灯夜游앞으로
2021-09-15 19:41:5316540검색

다음 uniapp 튜토리얼 칼럼에서는 uniapp 프로젝트에서 axios를 도입하는 방법을 소개하고, withCredentials를 사용하여 도메인 간에 동시에 사용할 수 없는 쿠키 및 백엔드 구성을 얻을 수 있는 몇 가지 기본 지식을 이해하는 데 도움이 되기를 바랍니다. 모두에게!

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

axiosaxios

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

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

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

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

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

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

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

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

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

uniapp 项目配置 axios

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

    uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

  • 引入 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

    uniapp 프로젝트에 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
4. 터미널에 입력하세요: npm install axios Install axios

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

5. 설치 후 다음과 같습니다. (axios가 node_modules에 나타납니다)

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

🎜🎜uniapp 프로젝트 구성 <code>axios🎜
    🎜🎜🎜utils 파일을 생성하고 생성 >.js 파일을 필요에 따라🎜 🎜🎜uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명
    🎜🎜🎜🎜 🎜axios 소개🎜🎜🎜🎜rrreee
      🎜🎜 🎜구성은 다음과 같습니다. (참고: withCredentials를 사용하면 쿠키 획득과 도메인 간 백엔드 구성을 동시에 사용할 수 없습니다. 알림을 위해 오류가 보고됩니다! ) 🎜🎜🎜🎜rrreee
        🎜🎜🎜프로젝트의 main.js 구성에 전역 axios를 도입하세요. 루트 디렉터리 🎜🎜🎜uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명 🎜🎜 🎜rrreee
          🎜🎜🎜즐거운 사용axios🎜🎜🎜🎜🎜🎜🎜🎜🎜렌더링: 🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜원본 주소: https://juejin.cn/post/7005042333288759333🎜🎜저자: Sunny_Chen🎜🎜🎜더 많은 프로그래밍 관련 지식을 보시려면 🎜프로그래밍 영상🎜을 방문해 주세요! ! 🎜

위 내용은 uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 掘金--Sunny_Chen에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제