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.

Pemasanganaxios

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)

Konfigurasi projek uniappaxios

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

  
  

• 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.jsaxios

  Senang digunakan

  

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