Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp
Lajur uniapp tutorial berikut akan memperkenalkan anda kepada kaedah memperkenalkan aksios dalam projek uniapp, dan memahami beberapa pengetahuan asas yang membolehkan dengan Kredensial untuk mendapatkan kuki dan konfigurasi bahagian belakang yang tidak boleh digunakan serentak di seluruh domain. Saya harap ia berguna kepada semua orang.
axios
1. Mula-mula semak sama ada npm
dipasang: Alat--> Pemasangan pemalam
2. Semak sama ada ia dipasang npm
Jika tidak, anda boleh membaca artikel saya: Pemasangan Windows node.js menggunakan npm untuk memasang vue
3. Selepas pemasangan, buka terminal terbina dalam dalam direktori semasa: (semak sama ada pemalam dipasang seperti dalam langkah sebelumnya)
4 Masukkan dalam terminal: npm install axios
Pasang axios
5 , seperti ditunjukkan di bawah selepas pemasangan: (axios muncul dalam node_modules)
uniapp
axios
Buat Fail Buat utils
fail seperti yang anda perlukan .js
Pengenalan
konfigurasi adalah seperti berikut: (Nota: dengan Kredensial membolehkan untuk mendapatkan kuki dan konfigurasi bahagian belakang merentas Domain tidak boleh digunakan pada masa yang sama, ralat akan dilaporkan kepada ingatkan anda! ) axios
import Vue from 'vue' import axios from 'axios'
diimport dalam konfigurasi direktori akar projek
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
Rendering: axios
Alamat asal: https://juejin.cn/post/7005042333288759333
Pengarang: Sunny_ChenUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Video PengaturcaraanAtas ialah kandungan terperinci Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!