다음 uniapp 튜토리얼 칼럼에서는 uniapp 프로젝트에서 axios를 도입하는 방법을 소개하고, withCredentials를 사용하여 도메인 간에 동시에 사용할 수 없는 쿠키 및 백엔드 구성을 얻을 수 있는 몇 가지 기본 지식을 이해하는 데 도움이 되기를 바랍니다. 모두에게!
axios
axios
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
npm
도구가 설치되어 있는지 확인하세요. 도구-->
npm
이 설치되어 있는지 확인하세요. 그렇지 않은 경우 제 글 windows node.js를 설치하고 npm을 사용하여 vue
3를 설치합니다. 설치 후 현재 디렉터리에서 내장 터미널을 엽니다. (이전 단계와 같이 플러그인이 설치되었는지 확인)
npm install axios
Install axios
5. 설치 후 다음과 같습니다. (axios가 node_modules에 나타납니다)🎜🎜
uniapp 프로젝트 구성 <code>axios
🎜utils
파일을 생성하고 생성 >.js
파일을 필요에 따라🎜 🎜🎜axios
소개🎜🎜🎜🎜rrreeemain.js
구성에 전역 axios
를 도입하세요. 루트 디렉터리 🎜🎜🎜 🎜🎜 🎜rrreeeaxios
🎜🎜🎜🎜🎜🎜🎜🎜🎜렌더링: 🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜원본 주소: https://juejin.cn/post/7005042333288759333🎜🎜저자: Sunny_Chen🎜🎜🎜더 많은 프로그래밍 관련 지식을 보시려면 🎜프로그래밍 영상🎜을 방문해 주세요! ! 🎜위 내용은 uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!