uniapp之小程序开发中引入axios

浅浅的花香味﹌ 2022-12-30 07:50 780阅读 0赞

1、下载依赖

npm install axios --save

2、创建一个js工具类

![20201224135635445.png][]

import Vue from 'vue'
    import axios from 'axios'
    
    // create an axios instance
    const service = axios.create({
    	baseURL: 'http://localhost:9004', // 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 => {
    		//添加请求头
    		config.headers["accessToken"] = "123";
    		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

3、修改main.js配置文件，添加如下代码

import axios from 'static/utils/https.js';
    Vue.prototype.$axios = axios;

4、使用

this.$axios({
    	methods:'get',
    	url:'/xxx',
    	params:queryParam
    }).then(res =>{
    	console.log(res)
    }).catch(err =>{
    	console.log(err)
    })

5、在测试环境下，小程序请求后端本地接口，需修改如下配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70][]

[20201224135635445.png]: /images/20221120/fccfdea0a9c94b2f835e16d774d9b1b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjQ4MDI5_size_16_color_FFFFFF_t_70]: /images/20221120/f16df56b6b7d47efb0c321da962f32f7.png