Rumah > hujung hadapan web > uni-app > Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

青灯夜游
Lepaskan: 2021-09-15 19:43:20
ke hadapan
16603 orang telah melayarinya

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.

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

Pemasanganaxios

1. Mula-mula semak sama ada npm dipasang: Alat--> Pemasangan pemalam

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

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)

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

4 Masukkan dalam terminal: npm install axios Pasang axios

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

5 , seperti ditunjukkan di bawah selepas pemasangan: (axios muncul dalam node_modules)

Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

Konfigurasi projek uniappaxios

  • Buat Fail Buat utils fail seperti yang anda perlukan .jsPengenalan

    Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

  • 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'
Salin selepas log masuk
  • 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
Salin selepas log masuk
  • main.jsaxios

    Senang digunakan

    Penjelasan terperinci tentang cara memperkenalkan axios dalam projek 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
Salin selepas log masuk
  • Rendering: axios

    Penjelasan terperinci tentang cara memperkenalkan axios dalam projek uniapp

  • Alamat asal: https://juejin.cn/post/7005042333288759333

    Pengarang: Sunny_ChenPenjelasan terperinci tentang cara memperkenalkan axios dalam projek uniappUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

    Video Pengaturcaraan
  • ! !

Atas 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!

Label berkaitan:
sumber:掘金--Sunny_Chen
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan